javascript - Rendering a listview backbone js -

i want have thing result:

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

i have indicator model , view:

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   } }); 

the indicatorlist model , view:

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.model.each(function(indicatormodel,index){       var indicatorview = new indicatorview({model:indicatormodel});       self.$el.append(indicatorview.render().$el);     });      return ;   } }); 

and indicatorgroup model, view, , template:

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 ;   } });    <!-- indicators group templates -->   <script type="text/template" id="indicatorgrouptemplate">     <h1> indicateurs </h1>     <div id="indicatorgroup"></div>   </script> 

here way test it:

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

it gives me this

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

whereas when test directly in console this, works correctly:

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

i don't understand, me same thing. why?

you've set 'collection' (indicatorlistmodel) 'model' of 'collection' (indicatorgroupmodel). backbone can strange things when try make collection of collections. instead, make indicatorlistmodel extend backbone's model class , make 1 of attributes of indicatorlistmodel (perhaps call 'list') collection of indicatormodel models. @ every level of chain, should have model, attribute mapped collection of models below it. should never have direct 'collection of collections.'