基于 JSON 的主干模型和集合的结构答案

【问题标题】：Structure of Backbone Models and Collections based on JSON基于 JSON 的主干模型和集合的结构
【发布时间】：2017-09-09 17:26:58
【问题描述】：

我有这个网络应用程序，它可以通过食物跟踪每日营养消耗，并以简洁的时间线呈现它们。

我是 Backbone 的新手，我正在尝试构建我的模型和集合。如何将以下 JSON 建模为 Backbone 模型/集合？

它应该是 day 模型中的 foods 集合吗？

{
      response: [
        { // a random day
          date: '1/1/2011',
          totalCalories: 1000,
          totalCarbs: 100,
          totalProtein: 60,
          totalFats: 30,
          foods: [
            { // a food consumed in this day
              datetime: '1/1/2011 17:30',
              calories: 500,
              proteins: 30,
              carbs: 50,
              fats: 15,
              img: 'link_to_img'
            },
            {
              datetime: '1/1/2011 19:30',
              calories: 500,
              proteins: 30,
              carbs: 50,
              fats: 15,
              img: 'link_to_img'
            }
          ]
        },
        { // another day
          date: '3/1/2011',
          totalCalories: 1000,
          totalCarbs: 100,
          totalProtein: 60,
          totalFats: 30,
          foods: [
            {
              datetime: '3/1/2011 17:30',
              calories: 500,
              proteins: 30,
              carbs: 50,
              fats: 15,
              img: 'link_to_img'
            },
            {
              datetime: '3/1/2011 19:30',
              calories: 500,
              proteins: 30,
              carbs: 50,
              fats: 15,
              img: 'link_to_img'
            }
          ]
        }
      ]
}

【问题讨论】：

DaysCollection> 模型> FoodsArray/FoodsCollection。食物应该是阵列还是主干集合取决于您的应用程序。如果您不需要对其执行任何与主干相关的操作，则它不必是一个集合。请注意，主干不支持嵌套集合或模型。因此，如果嵌套主干对象，则必须处理诸如传播事件之类的事情。为简单起见，我将食物作为数组保留
我在different ways to nest models and collections、dealing with nested model attributes和bubbling events from nested models and collections上写了完整的答案。

标签： javascript json backbone.js backbone.js-collections backbone-model

【解决方案1】：

如果你有 JSON，你可以创建集合和模型

Creating model

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

Creating collection

var myCollection = Backbone.Collection.extend({
  model: myModel
});

var ourCollection = new myCollection(yourJSON);

在您的示例中，我将创建 2 个集合（1 个嵌套在模型中） CollectionOfDays -> ModelOfDay -> CollectionOfFoods（模型内部）

var randomDay = Backbone.Model.extend({});
var randomDayCollection = Backbone.Collection.extend({
  model: randomDay
});

var collection = new randomDayCollection(yourJSON);

集合中的模型具有属性：

date: '1/1/2011',
totalCalories: 1000,
totalCarbs: 100,
totalProtein: 60,
totalFats: 30,
foods: [Array] -food consumed in day

之后，您可以为一个食品和食品集合创建其他模型并覆盖您的食品。

【讨论】：