Question

当我使用jQuery引用脚本时......

var template = _.template( $('#homeTemplate').html(), args );

......它有效，但只有当脚本在<head>这样的时候......

<script type="text/template" id="homeTemplate">
    <div class="homePage">
        <% /* stuff */ %>       
    </div>
</script>

如果我将它移动到这样的外部文件......

<script src="js/templates/hometemplate.js" type="text/template" id="homeTemplate"></script>

它停止工作。为什么？我该如何解决这个问题？

Answer 1

第二种方法不起作用，因为homeTemplate的{{1}}是一个空字符串。解决方案是使用第一个工作方法或通过Ajax加载模板。

Answer 2

我可以看到混淆的来源 - 模板内容通常放在脚本标记中的唯一原因是因为这会阻止浏览器在DOM中意外生成HTML。

包括js/templates/hometemplate.js将不生成您可以使用jQuery选择的DOM元素。使用AJAX来获取js / templates / hometemplate.js中的内容：

$.ajax({
    url : 'js/templates/hometemplate.js' 
}).done(function(data) { 
    _.template(data,args);
});

Answer 3

<script>模板hack用于在HTML文档中包含“NON-HTML”。如果您不想将其嵌入HTML中，请不要使用<script>。

只有很少的方法可以获得一个模板，一个字符串太长，你的Javascript，有利有弊。

顺便说一句。为什么你希望你的模板没有嵌入HTML中，当模板应该很小时（与完整的HTML相比），会引入额外的往返延迟延迟？

Answer 4

你可以使用AJAX抓住它们。但是，我喜欢将它们组织在一个JS文件中，如：

 Templates = {};

 Templates.myTemplate = [
   "<section>",
         "<article><% /* stuff */ %></article>",
   "</section>"
   ].join( '\n' );

Templates对象可以是全局应用程序对象app.Templates

上的属性