Javascript Backbone.js：通过模板嵌套视图

从技术上讲，是否可以使用模板之类的方式嵌套视图：

<%= new PhotoCollectionView({model:new PhotoCollection(model.similarPhotos)}).render().el) %>

我也可以把所有的东西都放在渲染方法中，但是模板化为灵活性和布局提供了更多的空间

我尝试了前面提到的变体，但屏幕上显示的结果是

[htmldevelment]

如果我尝试使用jQuery的HTML从中提取HTML，我会将其呈现出来，但结果是打印出来的DOM节点与视图引用的DOM节点不同，因为使用视图实例无法与这些DOM节点进行任何交互。例如，如果在视图中我说

$（this.el）.hide（）

，则什么也不会发生

---

正确的方法是什么，如果有的话？

我不知道模板本身，但我以前用过表和列表。在外部模板中，只需使用存根：

<script type="text/template" id="table-template">
    <table>
        <thead>
            <th>Column 1</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</script>

第1栏

至于个别项目：

---

然后在渲染方法中，只渲染单个项目并将它们附加到tbody元素…

我通常首先渲染父视图。然后，我使用

this.$（'selector'）

方法查找可以用作子视图el的子元素

以下是一个完整的示例：

var ChildView = Backbone.View.extend({
  //..
})

var ParentView = Backbone.View.extend({
  template: _.template($('#parent-template').html()),
  initialize: function() {
    _.bindAll(this, 'render');
  }
  render: function() {
    var child_view = new ChildView({ el: this.$('#child-el') }); //This refers to ParentView. 
    return this;
  }
});

var v = new ParentView();
v.render(); 

---

在我看来，每次渲染时初始化新对象的决定效率非常低。 特别是：

render: function() {
    var child_view = new ChildView({ el: this.$('#child-el') }); //This refers to ParentView. 
    return this;
  }

理想情况下，父对象的呈现应该类似于

render: function() {
   this.$el.html(this.template());
   this.childView1.render();
   this.childView2.render();
}

并且只有在初始化父级时才应创建子级：

initialize: function() {
       this.childView1 = new ChildView1(selector1);
       this.childView2 = new ChildView2(selector2);
} 

---

问题是在呈现父模板之前，我们没有selector1和selector2。这就是我目前所处的困境：）

公认的答案有一个重大缺陷，即每次呈现ChildView时都会重新初始化它。这意味着您将丢失状态，并且可能必须在每个渲染上重新初始化复杂视图

我在这里写了一篇博客：

总结一下，我建议使用以下方法：

var BaseView = Backbone.View.extend({

    // Other code here...

    renderNested: function( view, selector ) {
        var $element = ( selector instanceof $ ) ? selector : this.$el.find( selector );
        view.setElement( $element ).render();
    }
});

var CustomView = BaseView.extend({

    // Other code here...

    render: function() {
        this.$el.html( this.template() );
        this.renderNested( this.nestedView, ".selector" );
        return this;
    }
});

如果不想扩展主干视图，则不需要扩展主干视图，RenderTested方法可以放在任何您喜欢的地方

---

使用上面的代码，您现在可以在Initialization方法中初始化ChildView，然后在调用render（）时简单地渲染它。

查看mixin。它是为管理嵌套视图而构建的最低限度的mixin，并且不会在每次呈现父视图时重新初始化子视图。

我不确定这种技术在技术上是否可行，但我建议不要这样做，因为模板应该只包含简单的条件语句，而不包含任何应用程序逻辑。应用程序逻辑应该保留在视图中。这样，关注点就有了明确的分离，您的应用程序将更易于维护。您可以使用React.jswell嵌套视图。。。我最后也做了同样的事情，这似乎有点低效。每次呈现父视图时，您都将重新初始化子视图。请同意Alessandro的说法。除了效率低下之外，每次渲染父视图时，子视图中的动态状态也会丢失。签出准备使用的最低限度解决方案您应该在initialize中创建子视图，并将其存储为父视图的属性。然后在父视图的render函数中调用子视图的render。这似乎并不能真正回答这个问题，尽管这个建议似乎是合理的。一定要回答这个问题！