8

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

例如，我有使用 Template1 的 View1，使用 Template2 的 View2。Template2 实际上需要在 Template1 内的一个 DIV 中。我将模板 2 的 DIV 容器放入具有适当 ID 的模板 1 中，但在呈现页面时它不显示。如果我从 Template1 中删除 Template2 div 容器并将其放入页面正文中，它就可以正常工作。

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

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

4

5 回答 5

21

我过去处理这个的方式是分别定义两个视图，然后在渲染View1的时候，新建一个View2，渲染，插入View1。所以：

window.View1 = Backbone.View.extend({
    render: function() {
        this.view2 = new View2();
        this.$('insert-view-here').append(this.view2.render().el);
    }
});
于 2012-05-18T21:13:11.047 回答
4

您应该为此创建子视图。

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

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
于 2012-05-18T23:36:46.703 回答
2

当您需要在 Template1 中多次包含 Template2（例如作为<li>a 中的元素）时，另一个有用的选项<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);
  }
});
于 2013-06-29T17:46:06.150 回答
0

我理解的典型方式是将视图视为可以相互嵌入的完整对象。假设您有两个视图，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 实例。

于 2012-05-18T21:17:19.530 回答
0

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

View = Backbone.View.extend({
  template: _.template(...),
  prerender: function(tpl,model){// pre-render a component
      var template = _.template(tpl);
      return template(model);
  },
  render: function(){
    var model = { ... };
    var component = this.prerender(this.itemTemplate, model);
    this.$el.html(this.template(model).replace('<!--#component-->', component));
  }
});

如果您的模板不是常量并且依赖于当前范围的属性，它尤其有用。

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

于 2016-01-16T22:13:53.947 回答