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

您已将“集合”（IndicatorListModel）设置为另一个“集合”（IndicatorGroupModel）的“模型”。骨干can sometimes do strange things when you try to make a collection of collections。相反，make IndicatorListModel扩展Backbone的模型类，并将IndicatorListModel的一个属性（可能称之为'list'）作为IndicatorModel模型的集合。在链的每个级别，您都应该有一个模型，其属性映射到其下面的模型集合。你永远不应该有一个直接的'集合集'。

渲染listview骨干js

1 个答案: