如何使用backbone.js划分JSON收集结果

当前我的json的结果是这样的。

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

可以这样做吗?

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

这是我当前的jS代码:

var Feed = Backbone.Model.extend({
    url: function () {
        //API LINK HERE
    },  
    defaults: {
        // SOME 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 that = 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代码

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