渲染列表视图骨干JS

Question

我想有这个事情的结果：

<div id='indicators'> 
    <ul> group 1  
     <li>indicator 1</li> 
     <li>indicator 2</li>   
    </ul> 
    <ul> group 2  
     <li>indicator 1</li> 
     <li>indicator 2</li>   
    </ul> 
</div> 

我有指标，模型和视图：

var IndicatorModel = Backbone.Model.extend({ 
    defaults: { 
    name: "unset" 
    } 
}); 

var IndicatorView = Backbone.View.extend({ 
    tagName: 'li', 
    className: 'indicator', 
    initialize: function(options){ 
    _.extend(this, _.pick(options, "controller")); 
    this.model.on('change', this.render, this); 
    }, 
    render: function(){ 
    this.$el.html(this.model.get('name')); 
    return this; // enable chained calls 
    } 
}); 

的IndicatorList模型和视图：

var IndicatorListModel = Backbone.Collection.extend({ 
    model:IndicatorModel, 
    name: "unset" 
}); 

var IndicatorListView = Backbone.View.extend({ 
    tagName: 'ul', 
    className: 'indicatorList', 
    initialize: function(options){ 
    _.extend(this, _.pick(options, "controller")); 
    this.model.on('change', this.render, this); 
    }, 
    render: function() { 
    this.$el.html(this.model.name); 
    var self = this ; 

    this.model.each(function(indicatorModel,index){ 
     var indicatorView = new IndicatorView({model:indicatorModel}); 
     self.$el.append(indicatorView.render().$el); 
    }); 

    return this ; 
    } 
}); 

和IndicatorGroup模型，视图和模板：

var IndicatorGroupModel = Backbone.Collection.extend({ 
    model:IndicatorListModel 
}); 

var IndicatorGroupView = Backbone.View.extend({ 
    el: "#container", 
    template: _.template($("#indicatorGroupTemplate").html()), 
    initialize: function(options){ 
    _.extend(this, _.pick(options, "controller")); 
    this.model.on('change', this.render, this); 
    }, 
    render: function() { 
    this.$el.html(this.template()); 
    this.model.each(function(indicatorListModel,index){ 
     var indicatorListView = new IndicatorListView({model:indicatorListModel}); 
     $("#indicatorGroup").append(indicatorListView.render().$el); 

    }); 

    return this ; 
    } 
}); 

    <!-- Indicators Group Templates --> 
    <script type="text/template" id="indicatorGroupTemplate"> 
    <h1> Indicateurs </h1> 
    <div id="indicatorGroup"></div> 
    </script> 

下面是我测试的方式：它给了我这个

<div id="indicatorGroup"> 
    <ul class="indicatorList"> 
    unset<li class="indicator">groupe 1</li> 
    </ul> 
    <ul class="indicatorList"> 
    unset<li class="indicator">groupe 2</li> 
    </ul> 
</div> 

而当我在这个控制台直接测试

var indicatorModel1 = new IndicatorModel({name:"indicateur 1 (groupe 1)"}); 
var indicatorModel2 = new IndicatorModel({name:"indicateur 2 (groupe 1)"}); 
var indicatorModel3 = new IndicatorModel({name:"indicateur 3 (groupe 2)"}); 
var indicatorModel4 = new IndicatorModel({name:"indicateur 4 (groupe 2)"}); 
// --- Indicator List Models 
var indicatorListModel1 = new IndicatorListModel([indicatorModel1,indicatorModel2]); 
indicatorListModel1.name="groupe 1"; 
var indicatorListModel2 = new IndicatorListModel([indicatorModel3,indicatorModel4]); 
indicatorListModel2.name="groupe 2"; 
// --- Indicator Group Models 
var indicatorGroupModel = new IndicatorGroupModel([indicatorListModel1,indicatorListModel2]); 
// --- View 
var indicatorGroupView = new IndicatorGroupView({model:indicatorGroupModel}); 
indicatorGroupView.render() 

，它工作正常：

var indicatorListView1 = new IndicatorListView({model:indicatorListModel1}); 
$("#container").append(indicatorListView1.render().$el); 
<ul> group 1  
    <li>indicator 1</li> 
    <li>indicator 2</li>   
</ul> 

我不明白，对我来说是一回事。为什么？

Answer 1

您已将'collection'（IndicatorListModel）设置为另一个'collection'（IndicatorGroupModel）的'模型'。主干can sometimes do strange things when you try to make a collection of collections。取而代之的是，使IndicatorListModel扩展Backbone的模型类，并使IndicatorListModel（也许称为“列表”）的一个属性IndicatorModel模型的集合。在链条的每一层，你都应该有一个模型，一个属性映射到它下面的模型集合。你永远不应该有一个直接的“收藏品”。