JSRender 内联模板

【问题标题】：JSRender inline templatesJSRender 内联模板
【发布时间】：2015-08-23 15:52:52
【问题描述】：

使用 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);

【问题讨论】：

【解决方案1】：

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

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

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

无论如何，在 JSRender website 上创建模板的不同方法都有一些很好的示例。

【讨论】：