Backbone.js 将模板与 html 文件分开答案

【问题标题】：Backbone.js separate templates from html fileBackbone.js 将模板与 html 文件分开
【发布时间】：2013-06-11 19:23:02
【问题描述】：

我正在开发一个 Backbone.js 应用程序。我们正在使用 underscore.js 模板将内容加载到视图中。目前我们在 index.html 文件中拥有所有模板，因此文件的大小正在增加。谁能帮我找到将这些模板与其他文件分离的解决方案？提前致谢。

编辑

最近我访问了Backbone patterns，发现我们可以使用JST templates为每个模板创建单独的模板文件。他们解释说我们可以创建一个jst.js 文件来放置我们所有的模板代码：

// http://myapp.com/javascripts/jst.js
window.JST = {};

window.JST['person/contact'] = _.template(
    "<div class='contact'><%= name %> ..."
);

window.JST['person/edit'] = _.template(
   "<form method='post'><input type..."
);

<script src="http://myapp.com/javascripts/jst.js"></script>

现在所有模板都在jst.js 文件中。但是如果你有很多模板并且你想将模板移动到单独的文件中，你可以创建单独的模板文件：

// http://myapp.com/javascripts/jst.js
window.JST = {};

//http://myapp.com/javascripts/contactPerson.template.js
window.JST['person/contact'] = _.template(
    "<div class='contact'><%= name %> ..."
);

//http://myapp.com/javascripts/editPerson.template.js
window.JST['person/edit'] = _.template(
   "<form method='post'><input type..."
);

<script src="http://myapp.com/javascripts/jst.js"></script>
<script src="http://myapp.com/javascripts/contactPerson.js"></script>
<script src="http://myapp.com/javascripts/editPerson.js"></script>

如果有更简单的想法，请告诉我。谢谢！

【问题讨论】：

考虑将模板分离成文件，然后在部署之前将它们编译成 js 文件。查看资产打包器，例如 documentcloud.github.com/jammit/#jst

标签： backbone.js underscore.js

【解决方案1】：

您可以在单独的 html 文件中拥有模板，并可以使用 requirejs 将它们作为文本加载。有一个名为text 的插件可以帮助您做到这一点。

例子：

define([
  'text!templates/sampleTemplate.html'
], function(tmpl){

    var Sampleview = Backbone.View.extend({
      id: 'sample-page',

      template: _.template(tmpl),

      render: function() {
        $(this.el).html(this.template());
        return this;
     }
  });
  return SampleView;
});

html 文件“templates/sampleTemplate.html”将取自 require.js 配置中指定的根路径

【讨论】：

【解决方案2】：

通过xhr 加载它们。 lib requirejs (requirejs.org) 以这种方式加载 html 文件依赖项。这在开发时可以工作，但模板应该在生产中编译成 js 文件。

【讨论】：