如何将 .el 设置为 underscore.js 模板中的 div？

Question

这是非常基本的事情，但我仍然找不到答案。我需要将 View 的 el: 设置为 underscore.js 模板中的 div。

<script id="product" type="text/template">
    <div class="productInfo"></div>
    <div class="prices"></div>
    <div class="photos"></div>
</script>

第一个视图呈现product 模板。我需要在此模板中将其他视图呈现给 div。我不知道如何设置el:，因为el: '.prices' 只是不使用模板中的div。

此视图结构类似于How to handle initializing and rendering subviews in Backbone.js?。但我使用模板而不是渲染到现有的 div。

Answer 1

所以问题是如果匹配的<div> 未附加到页面的DOM，则为this.el 使用CSS 选择器字符串将找不到任何内容。在你<script>标签模板的情况下，<script>标签的内容不是附加的DOM节点，只有一个文本节点。

给定您的 HTML 的一个选项是忘记 <script> 标记并将空的 <div> 标记直接放入 HTML。它们是空的，因此应该是无害且不可见的，直到您实际在其中渲染一些内容。如果你这样做，el: '.productInfo:first' 应该可以正常工作。

除此之外，您还需要按照以下方式将逻辑放入父视图中：

• 将模板渲染到分离的 DOM 节点中
• 在分离的 DOM 节点中搜索子视图 div
• 将子视图 div 映射到相应的主干视图子类
• 实例化并渲染子视图，然后使用 this.$el.find('.productInfo').replaceWith(productInfoView.el) 之类的东西将渲染的 HTML 放入父视图的正确位置

我的一般意见是视图应该渲染到分离的 DOM 节点，并将其留给其他组件，例如路由器或布局管理器，以决定它们在真实 DOM 中的连接位置。我认为这使视图更具可重用性和可测试性。

Answer 2

渲染父视图，然后将 '.prices' 分配为子视图的 el：

var ParentView = Backbone.View.extend({
    render : function() {
        var html='<h1>Parent View</h1><div class="productInfo"></div><div class="prices"></div><div class="photos"></div>';
        this.$el.html(html);

        var prices = new PricesView({
            el : this.$('.prices')
        });
        prices.render();
    }
});

var PricesView = Backbone.View.extend({
    render : function() {
        var html='<h2>Prices View</h1>';
        this.$el.html(html);
    }
});

// Create a parent view instance and render it
var parent = new ParentView({
    el : $('.parent')
});

parent.render();

​

jsfiddle 上的工作示例：http://jsfiddle.net/JpeJs/

Answer 3

来自version 0.9.9，主干允许您将视图的el 属性定义为函数：

在声明视图时，如果您希望在运行时确定它们的值，现在可以将选项、el 和 tagName 定义为函数。

假设子视图是在主视图之后创建的，如果您的子视图知道它们的父视图，这可能会对您有所帮助：

 SubView = Backbone.View.extend({
     el : function(){
         return this.parent.$('.prices');
     }
 });

 var subViewInstance = new SubView({parent : theParentView});