如何使用不平坦的數據創建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爲好。