如何使用不平坦的数据创建Backbone集合

Question

我不确定如何使用以下数据创建Backbone集合，并且不知道应该如何处理它。

JSON中的items属性对我来说很有意义，因为它已经是一个数组了。但是有没有一种很好的方法可以将其他信息提供给集合，或者保持其持久性以防需要在视图中引用它？我应该如何处理集合的以下数据格式？

下面是一些示例数据和代码：

{ 
"page": 1, 
"total": 1000, 
"items": [ 
    { 
     "title": "title of item 1", 
     "color": "green", 
     "type": [ 
      { 
       "isStandard": "Yes", 
       "size": "Large" 
      }, 
      { 
       "isStandard": "No", 
       "size": "Medium" 
      } 
     ], 
     "price": "9.99" 
    }, 
    { 
     "title": "title of item 2", 
     "color": "blue", 
     "type": [ 
      { 
       "isStandard": "No", 
       "size": "XXL" 
      }, 
      { 
       "isStandard": "No", 
       "size": "XXS" 
      } 
     ], 
     "price": "19.99" 
    }, 
    { 
     "title": "title of item 3", 
     "color": "red", 
     "type": [ 
      { 
       "isStandard": "No", 
       "size": "Small" 
      }, 
      { 
       "isStandard": "Yes", 
       "size": "Large" 
      } 
     ], 
     "price": "229.99" 
    } 
], 
"date": "Wed Oct 08 2014 21:04:05 GMT-0500 (CDT)" 
} 

var SomeModel = Backbone.Model.extend({}); 
 

 
var SomeCollection = Backbone.Collection.extend({ 
 
    model: SomeModel, 
 
    
 
    url: 'https://api.mongolab.com/api/1/databases/backbonecollectiontest/collections/backbonecollection?apiKey=qcVNgNb-s1X4WJkLeRDfykxqtMG-ezkC', 
 
    
 
    parse: function(response) { 
 
     // Returning only the items data. But this will be missing data in the response 
 
     // that is not included in the items property 
 
     return response[0].items; 
 
    } 
 
}); 
 

 
var SomeView = Backbone.View.extend({ 
 
    el: '.js-container', 
 
    
 
    initialize: function() { 
 
     this.collection = new SomeCollection(); 
 
     
 
     this.collection.fetch(); 
 
     
 
     this.listenTo(this.collection, 'sync', this.render); 
 
    }, 
 
    
 
    template: _.template($('#some-template').html()), 
 
    
 
    render: function() { 
 
     
 
     this.$el.html(this.template({collection: this.collection.toJSON()})); 
 
     
 
    } 
 
}); 
 

 
var someView = new SomeView();

<div class="js-container"> 
 
</div> 
 

 
<script type="text/template" id="some-template"> 
 
    <h3>How should I get the 'page', 'total', and 'date' properties in the data here?</h3> 
 
    <% _.each(collection, function(element, index) { %> 
 
     <p> 
 
     <%- element.title %>, 
 
     <%- element.color %>, 
 
     <% _.each(element.type, function(ele, i) { %> 
 
      <%- ele.isStandard %>, 
 
      <%- ele.size %>, 
 
     <% }); %> 
 
     <%- element.price %> 
 
     </p> 
 
    <% }); %> 
 

 
</script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://underscorejs.org/underscore-min.js"></script> 
 
<script src="http://backbonejs.org/backbone-min.js"></script>

Answer 1

看起来像你在这里需要嵌套模式：

这里是一个原型赶上理念，为更多信息结帐this post

1）创建项目

var Item = Backbone.Model.extend({ 
    defaults: { 
     "title": "no-title", 
     "color": "no", 
     "type": [], 
     "price": "0" 
    } 
}); 

var ItemsCollection = Backbone.Collection.extend({ 
    model: Item 
}); 

2模型和集合）创建父模型，看起来像网页你的情况：

var PageModel = Backbone.Model.extend({ 
    defaults: { 
     page: 0, 
     date: 'now', 
     total: 0, 
     items: [] 
    }, 
    initialize: function() { 
     var items = this.get('items'); 
     this.set('items', new ItemsCollection(items)); 
    } 
}); 

如果在JSON RESP的阵列，U可以创建PageCollection为好。