Question

是否可以将模板嵌套在模板中并通过骨干视图进行访问？

例如，我使用Template1使用View1，使用Template2使用View2。 Template2实际上需要在Template1内部的DIV中。我使用适当的id将template2的DIV容器放在template1中，但是在呈现页面时它不会显示。如果我从Template1内部删除Template2 div容器，并将其放在页面正文中，它可以正常工作。

所以只是想知道这是否可能，或者我是否必须嵌套视图/模型等以使其工作？

Template2中的数据在技术上与Template1无关，只需显示在嵌入Template1的页面上的位置。

Answer 1

我过去处理这个问题的方法是分别定义两个视图，然后在渲染View1时，创建一个新的View2，渲染它，并将其插入到View1中。所以：

window.View1 = Backbone.View.extend({
    render: function() {
        this.view2 = new View2();
        this.$('insert-view-here').append(this.view2.render().el);
    }
});

Answer 2

您应该为此创建子视图。

我喜欢在闭包中私有化子视图并返回公共视图。

var View = (function (BV) {
    var View, Subview;

    // Only this main view knows of this subview
    Subview = BV.extend({ 
        template: _.template( subtmpl ),

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

    View = BV.extend({
        template: _.template( tmpl ),

        render: function () {
            this.$el.html( this.template( this.model.toJSON() ) );

            var subview = new SubView({ model: this.model }); 

            // replace a div in your template meant for teh subview with the real subview
            this.$el.find( "#subview" ).replaceWith( subview.render().el );

            return this;
        }   
    }); 

    return View;

}(Backbone.View));

var view = new View({ model: user });
var subview = new Subview; // Reference Error

Answer 3

当你需要在Template1中多次包含Template2时，另一个有用的选项，比如<li>中的<ul>元素，就是将Template2函数传递给Template1。（来自Rico Sta Cruz' Backbone Patterns。）

TasksList = Backbone.View.extend({
  // Template1, inlined in js.
  template: _.template([
    "<ul class='task_list'>",
      "<% items.each(function(item) { %>",
        "<%= itemTemplate(item) %>",
      "<% }); %>",
    "</ul>"
  ].join('')),

  // Template2, inlined in js.
  itemTemplate: _.template(
    "<li><%= name %></li>"
  ),

  render: function() {
    var html = this.template({
      items: tasks /* a collection */,
      itemTemplate: this.itemTemplate
    });

    $(this.el).append(html);
  }
});

Answer 4

我理解的典型方法是将视图视为可以相互嵌入的完整对象。假设您有两个视图，ViewA和ViewB。以下代码显示了如何将ViewB附加到ViewA中。

# this is coffeescript, but it's easily translated to JS
class ViewA extends Backbone.View
    initialize: () ->
        this.render()

    render: ()->
        this.$el.append(new ViewB().$el)
        this.$el.append(new ViewB().$el)
        return this

您可以了解ViewB的管理方式（将其分配给属性或其他）或将不同的构造函数参数传递给每个ViewB实例。

Answer 5

更精简的解决方案，不需要jQuery state: model.state或涉及双jQuery范围的额外SubView对象，是使用下划线方法严格预渲染/预编译，并将子视图作为字符串插入，使用主模板中的内部注释标记。

append()

如果您的模板不是常量，并且取决于当前范围的属性，它会很有用。

请注意，对于此问题的范围，您必须将View2模型传递给组件。

骨干模板嵌套在另一个模板中

5 个答案: