0

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

<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。

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

4

3 回答 3

1

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

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

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

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

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

于 2012-12-31T15:09:24.117 回答
0

渲染父视图，然后将 '.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();

​</p>

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

于 2012-12-31T15:12:15.087 回答
0

从0.9.9 版本开始，主干让您将el视图的属性定义为函数：

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

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

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

 var subViewInstance = new SubView({parent : theParentView});
于 2012-12-31T15:21:13.597 回答