JSRender 内联模板

Question

使用 JSRender 可以使用 "text/x-jsrender" 类型的脚本标签创建模板。例如

<script id="movieTemplate" type="text/x-jsrender">
        <li>
            {{>name}} {{>releaseYear}}
        </li>
</script>

然后可以这样渲染：

<script type="text/javascript">
        $("#movieList").html(
            $("#movieTemplate").render(movies)
        );
</script>

然而，对于简单的模板，我更愿意将它们声明为内联的，而不是在单独的 "text/x-jsrender" 脚本标记中。这可能吗？我在想一些事情：

   var myTemplate = "<li>{{>name}} {{>releaseYear}}</li>";
   var outputHtml = render(myTemplate, movies);

Answer 1

您可以使用 $.templates() 执行此操作。你很接近你只是错过了一行：

var myTemplateText = "<li>{{>name}} {{>releaseYear}}</li>";
var myTemplate = $.templates(myTemplateText);
var outputHtml = myTemplate.render(movies);

但请注意，模板的好处之一是您可以将演示文稿与代码分开。这意味着如果我是一名设计师，我可以轻松地弄乱您的模板 HTML 而无需了解 JavaScript 逻辑。当您按照我上面显示的方式进行操作时，您会失去这种能力，因为您混合了表示和逻辑。这取决于你是否同意。

上有一些创建模板的不同方法的好例子

JSRender inline templates