javascript - How to divide JSON collection result using backbone.js -

current results of json this.

<div id="item-list">    <div class="row" id="featured-item">       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>    </div> </div> 

is possible make this?

<div id="item-list">    <div class="row">       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>    </div>    <div class="row">       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>    </div>    <div class="row">       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>    </div>    <div class="row">       <div class="col-md-6"><p>content righ here</p></div>       <div class="col-md-6"><p>content righ here</p></div>    </div>    <div class="row">       <div class="col-md-6"><p>content righ here</p></div>    </div> </div> 

here current js code:

var feed = backbone.model.extend({     url: function () {         //api link here     },       defaults: {         // attributes here     } });  var stream = backbone.collection.extend({         url: function () {         //api link here         return link;     },     page: 0,     sort: 'date_created',     order: 'desc',     limit: 12,     model: feed,     parse: function (response) {                 $('.total_records').text(response._count);                var tags = response.data;         this.totalrecords = response._count;         return tags;     } });   // master view var directoryview = backbone.view.extend({     el: $("#main-section"),     initialize: function () {            this.collection = this.options.collection;         this.isloading = false;         this.render();         this.collection.on("add", this.renderfeed, this);             },     events: {         'click #loadmore-feed' : 'loadmore'     },     render: function () {         var = this;         this.isloading = true;         this.collection.fetch({success: function () {                 _.each(that.collection.models, function (item) {                     that.renderfeed(item);                 }, this);                 that.isloading = false;                 $("abbr.timeago").timeago();                  that.$el.find('#load-more-container').html(                     _.template($('#load-more-template').html())                 );                           }         });          if(!this.collection.totalrecords) {             $('#load-more-container').hide();         }     },       loadmore: function () {         $('#load-more-container').hide();         if(this.collection.totalrecords > this.collection.page) {             this.collection.page += 12;             this.render();               $('#load-more-container').show();         }           },     renderfeed: function (item) {                 var optionsview = new optionsview({             model: item         });          this.$el.find('#item-list > div').append($(optionsview.render().el).hide().fadein('slow'));      }   });  var optionsview = backbone.view.extend({     tagname: "div",     classname: "col-md-6",     template: $("#emp-list-item").html(),     render: function () {         var tmpl = _.template(this.template);                 this.$el.html(tmpl(this.model.tojson()));         return this;     } });  

html code

<div id="main-section">     <div id="item-list">         <div class="row" id="featured-item"></div>     </div>     <div id="load-more-container"></div> </div> <!-- backbonejs view template --> <script id="emp-list-item" type="text/template">           <p>content righ here</p> </script> <script id="load-more-template" type="text/template">     <p>         <div class="progress xs progress-striped">             <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%">                 <span class="sr-only">60% complete (warning)</span>             </div>         </div>         <div class="tcenter">             <a href="javascript:void(0)" id="loadmore-feed">load more</a>         </div>       </p> </script>  <!-- script autoloading on mobile device --> <script type="text/javascript">     $(document).ready(function() {         var paginateditems = new stream();         var directoryview = new directoryview({collection: paginateditems});         $(window).scroll(function() {             if (directoryview.$el.is(':visible') && !directoryview.isloading && $(window).scrolltop() + $(window).height() > getdocheight() - 400 ) {                 directoryview.loadmore();                      }         });     }); </script> 

your question title concerns json example concerns html, totally different concerns. cannot tell if mean "can produce type of html structure" or "can make collection hold structure of data."

without addressing core issues, should still move fetch out of render, , make render happens on success. instance:

initialize: function(models) {     // ...do stuff...     if (!models)          this.fetch({success: this.render, error: this.error});     _.bindall(this, 'render', 'error', 'render'); }, 

in success, should prepare render:

render: function(collection) {     var modelsflat = collection.models;     var nested = _(list).chain().partition(function(x) {          // below makes array of evens , odds indices          return (_(list).indexof(x) % 2) == 0;        }).zip()           // turns columns rows, ie [[1,3,5],[2,4,6]] => [[1,2],[3,4],[5,6]]       .value();        // unwraps (no more chaining)      _(nested).each(function(n) {         var inner = new backbone.collection(n);         var innerview = new optionsview(inner);         innerview.render();     });     // rest of current render } 

and new directoryitemview pretty optionsview, involves no server-side stuff.

so this:

1. calls fetch on initialize of outer view outer collection
2. on success calls render
3. on render, reorganizes each pair of items new little collection
4. on each collection, creates new inner optionsview collection, , renders it
5. finishes rendering rest of outer view.