javascript - 如何使用不平坦的数据创建主干集合

Question

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

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

以下是一些示例数据和代码:

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

看起来你需要嵌套模型:

这是一个捕捉这个想法的原型(prototype)，有关更多信息，请查看 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 数组，您也可以创建 PageCollection。