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

这是一件很基本的事情，但我仍然找不到答案。我需要将视图的

el:

设置为div，它位于

underline.js

模板中

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

第一个视图呈现

产品

模板。我需要在此模板中向div呈现其他视图。我不知道如何设置

el:

，因为

el:'.prices'

在模板中无法使用div

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

---

此视图结构类似于。但是我使用模板而不是呈现到现有的div。

所以问题是使用CSS选择器字符串来选择这个。如果匹配的

没有附加到页面的DOM，el将找不到任何东西。对于

标记模板，

标记的内容不是附加的DOM节点，只有一个文本节点

HTML中的一个选项是忽略

标记，将空的

标记直接放入HTML中。它们是空的，因此在您实际呈现其中的某些内容之前，它们应该是无害的和不可见的。如果这样做，

el:'.productInfo:first'

应该可以正常工作

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

• 将模板渲染到分离的DOM节点中
• 在分离的DOM节点中搜索子视图div
• 将子视图div映射到相应的主干视图子类
• 实例化并呈现子视图，然后使用类似

  this.$el.find（'.productInfo'）.replaceWith（productInfoView.el）

  的方法将呈现的HTML放入父视图的正确位置

---

我的一般意见是，视图应该呈现给分离的DOM节点，并将其留给其他组件（如路由器或布局管理器）来决定它们在真实DOM中的连接位置。我认为这使视图更易于重用和测试。

呈现父视图，然后将“.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();

var ParentView=Backbone.View.extend({
render:function（）{
var html='Parent View'；
这个.$el.html（html）；
var价格=新价格视图({
el:这个.$（“价格”）
});
prices.render（）；
}
});
var PricesView=Backbone.View.extend({
render:function（）{
var html='pricesview'；
这个.$el.html（html）；
}
});
//创建父视图实例并渲染它
var parent=newparentview({
el:$（“.parent”）
});
parent.render（）；

​

jsfiddle上的工作示例：

from，它允许您将视图的

el

属性定义为一个函数：

在声明视图时，如果希望在运行时确定其值，选项、el和标记名现在可以定义为函数

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

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

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

---

你真的需要子视图吗？我不这么认为，你应该提供视图所有需要渲染的模型和集合，然后渲染整个场景。或者渲染每个子视图，然后使用（将html附加到主视图）将它们放入主视图。或者更好的办法是，抛弃主干线，使用AngularJS，这样你就不必再问自己这些问题了。如果我从视图中呈现源代码，我将能够将

el:

设置为不存在的div？parentview中应该有什么？谢谢六羟甲基三聚氰胺六甲醚。。。家长的看法可能？谢谢！我正在尝试您的代码，但是

el:this.$（'.prices'）

没有在模板中选择div。对你有用吗？