呈现列表视图 backbone 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>

我是这样测试的：

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()

它给了我这个

<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 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) 的 'model'。 Backbonecan sometimes do strange things when you try to make a collection of collections。相反，使 IndicatorListModel 扩展 Backbone 的模型 class 并使 IndicatorListModel 的属性之一（也许称之为 'list'）成为 [=14] 的集合=] 模型。在链的每一层，你都应该有一个模型，一个属性映射到它下面的模型集合。你不应该直接 'collection of collections.'

呈现列表视图 backbone js

Rendering a listview backbone js

javascript

backbone.js