0

我在这里找到了如何使用 HBS 插件管理模板的示例。这似乎是一个很好的解决方案。@machineghost 建议使用 RequireJS 来包含这样的模板：

define(['template!path/to/someTemplate'], function(someTemplate) {
    var MyNewView = BaseView.extend({template: someTemplate});
    $('body').append(new MyNewView().render().el);
}

这很好，除了我需要动态切换模板。这是我的一个观点的一个例子：

define([
    'jquery',
    'underscore',
    'backbone',
    'models/tableModel',
    'collections/tablesCollection',
    'views/tablesView'
], function($, _, Backbone, tableModel, tablesCollection, tablesView) {
    var t = new tablesCollection(null, {url: 'applications-lab'});
    return new tablesView({ collection: t, template: 'applications-lab-template', url: 'applications-lab'});
});

如您所见，我在渲染视图时传入了模板。我想知道的是我可以将一个变量传递给define告诉 Backbone 使用哪个模板路径的语句吗？我是 Backbone 的新手，尤其是 RequireJS，我不确定。建议任何人？

4

1 回答 1

1

初步说明：

  • require.js 不允许在模块定义中使用参数，define 接受依赖数组和定义函数：

    define(['dep1', 'dep2', ...], function(dep1, dep2) {
})
  • 我不会定义视图，实例化它并将其 el 注入同一个模块，但可以随意混合和匹配您的口味

让我们从一个使用默认模板定义简单视图的模块开始，比如说views/templated.js 

define(['backbone', 'hbs!path/to/defaultTemplate'], 
    function(Backbone, defaultTemplate) {

    var MyNewView = Backbone.View.extend({
        template: defaultTemplate,

        initialize: function(opts) {
            opts = opts || {};

            // use the template defined in the options or on the prototype
            this.template = opts.template || this.template; 
        }
     });

     return MyNewView;
});

现在您只需使用 require 拉取视图定义和可选模板：

require(['views/templated', 'hbs!path/to/anotherTemplate'], 
    function(MyNewView, anotherTemplate) {

    // a view with the default template
    var v1 = new MyNewView();

    // a view with a new template
    var v2 = new MyNewView({
        template: anotherTemplate
    });
});

要使用覆盖的默认模板创建新类，您需要定义一个新模块（views/override.js）

define(['views/templated', 'hbs!path/to/anotherTemplate'], 
    function(MyNewView, anotherTemplate) {

    var AnotherNewView = MyNewView.extend({
        template: anotherTemplate
     });

     return AnotherNewView;
});

最后，您始终可以通过直接分配新值来更改给定实例上的模板。

var v = new MyNewView();
v.template = tpl;

模拟视图层次结构的小提琴：http: //jsfiddle.net/nikoshr/URddR/

回到你的代码，你的块可能看起来像

require(['models/tableModel', 'collections/tablesCollection', 'views/templated', 'applications-lab-template'], 
    function(tableModel, tablesCollection, tablesView, tpl) {

    var t = new tablesCollection(null, {url: 'applications-lab'});
    var v = new tablesView({
        collection: t,
        template: tpl
        url: 'applications-lab'
    });

    // or, if you prefer and you don't render in initialize
    v.template = tpl;
});
于 2013-02-06T17:31:21.087 回答