Backbone.js 将脚本/模板信息移动到 js 文件中答案

【问题标题】：Backbone.js Move script/template information into js fileBackbone.js 将脚本/模板信息移动到 js 文件中
【发布时间】：2013-10-10 06:11:14
【问题描述】：

我的 HTML 中有以下代码块作为我用于我的 Backbone 的模板。但是，我不确定如何将其移动到 JS 文件中，因此我的 HTML 文件中不会包含内联 javascript。在 .erb 文件中使用此类文件时遇到了一些问题，我想将 javascript 部分移动到 javascript 文件中，不幸的是，我不知道如何将脚本类型更改为 javascript 类型，同时保留它我的模板。

<script type="text/template" id="lesson-template">
    <span id="lesson-title"><%= tracks[0].title %></span>
    <select class="sel">
        <% _.each(tracks, function(track) { %>
            <option value="<%= track.id %>"><%= track.title %></option>
        <% }); %> 
    </select>
    <p id="tracktext"><%=  tracks[0].text %></p>
</script>

感谢您的帮助！

【问题讨论】：

标签： javascript html templates backbone.js underscore.js

【解决方案1】：

假设您已包含下划线，这非常简单。像这样的：

var template = _.template(
    '<span id="lesson-title"><%= tracks[0].title %></span>' +
    '<select class="sel">' +
        '<% _.each(tracks, function(track) { %>' +
            '<option value="<%= track.id %>"><%= track.title %></option>' +
        '<% }); %>' + 
    '</select>' +
    '<p id="tracktext"><%=  tracks[0].text %></p>'
);

然后，只需从 template 变量访问它。

【讨论】：

【解决方案2】：

将模板移动到 javascript 代码有很多缺点：难看的连接，本质上是与功能代码交织在一起的演示代码。

如果您的问题根源是与erb 冲突，您可以：

不使用erb 服务器端。你真的需要它来输出你的 JS 模板吗？
重新定义 undercore _.template 开始和结束标签

如果您选择第二个选项，所有必要的信息都可以在 _.template documentation 中找到。

【讨论】：