Question

我正在研究Backbone.js应用程序。我们使用underscore.js模板将内容加载到View。目前我们在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>

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

Answer 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配置中指定的根路径

Answer 2

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

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

2 个答案: