javascript - Backbone.js 在集合中指定模型的目的是什么

Question

这是我想了解的内容。

我经常发现自己这样写 backbone:

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

var CallsCollection = Backbone.Collection.extend({
    model: CallModel,
    url: 'url/to/external/json'
});

这是一个非常基本的示例，但如您所见，模型中实际上没有任何内容，所有数据都是通过外部 url 调用从数据库构建的 json 文件进入集合的。

那么模型的目的是什么？我确信我可能没有最大程度地使用 backbone.js，这就是为什么我在这里问你们。

Answer 1

首先，“模型中实际上没有任何东西，所有数据都通过外部 url 调用进入集合”——这不是真的。

假设您有以下内容:

//Model
var CallModel = Backbone.Model.extend({
  defaults: {      
    cost:0,
    duration:0
  }
});

(如果没有自定义属性或方法，扩展原始 Backbone.Model 毫无意义)

//Collection
var CallsCollection = Backbone.Collection.extend({
  model: CallModel,
  url: 'url/to/external/json'
});

以及服务返回的json数据，大概是这样的:

//Response
{
   callSummary: {
     missed: 2,
     received: 3,
     totalCalls:5
     totalDuration: 20
   }
   calls: [{
         id:001,
         caller:"Mr.A",
         callee:"Mr.B",
         cost:1,
         duration:5
      },{
         id:002,
         caller:"Mr.X",
         callee:"Mrs.Y",
         cost:1,
         duration:7
      },{
         id:003,
         caller:"Mr.A",
         callee:"Mrs.B",
         cost:1,
         duration:8
  }],
  //and more additional information from your db
}

现在您通过调用 fetch 来用数据填充您的集合方法:

CallsCollection.fetch();

您的收藏应该类似于:

{
 models: [{
   attributes: {
     callSummary: {},
     calls: [{},{},{}],
     ...
   },
   ...
 }],
 length:1,
 url: "url/to/external/json",
 ...
}

数据将被添加到模型的属性散列中。如果您不指定特定型号，如 Bart 在他的 answer 中提到的那样, backbone 将使用 Backbone.Model 实例填充集合:这仍然不是很有用 - 呃......一个 collection 具有单个模型，其属性中包含完整的响应数据原来如此……

在这一点上，你想知道我为什么还要创建一个模型，然后创建一个集合..？

这里的问题是集合派生自数组，而模型派生自对象。在这种情况下，我们的根数据结构是一个对象(而不是数组)，因此我们的集合试图将返回的数据直接解析为一个单一模型。

我们真正想要的是让我们的集合从服务响应的“调用”属性中填充其模型。为了解决这个问题，我们只需添加一个 parse方法到我们的集合中:

var CallsCollection = Backbone.Collection.extend({
  model: CallModel,
  url: 'url/to/external/json',
  parse: function(response){
    /*save the rest of data to corresponding attributes here*/
    return response.calls; // this will be used to populate models array
  }
});

现在您的收藏将如下所示:

{
 models: [{
         ...
         attributes: {
           ...
           id:001,
           caller:"Mr.A",
           callee:"Mr.B",
           cost:1,
           duration:5
         }
      },{
         ...
         attributes: {
           ...
           id:002,
           caller:"Mr.X",
           callee:"Mrs.Y",
           cost:1,
           duration:7
         }
      },{
         ...
         attributes: {
           ...
           id:003,
           caller:"Mr.A",
           callee:"Mrs.B",
           cost:1,
           duration:8
       }
   }],
 length:3,
 url: "url/to/external/json",
 ...
}

这就是我们想要的! :现在处理数据非常容易:您可以使用添加、删除、查找、重置和handful of other collection methods。有效地。

您可以将此模型数组传递到您选择的模板库中，可能使用两种方式绑定(bind):当其中一个调用模型的相应 View 发生更改时，特定模型将被更新，事件将从您的模型传播到集合, 并且特定模型将被传递到处理函数中。

您现在可以调用 fetch、save、destroy、clear 和 lot of other methods轻松处理单个数据单元(每个模型)，而不是将整个数据保存在单个模型中 - 这几乎没有用，您必须迭代手动通过响应数据并执行 CRUD和你自己的类似操作，在大多数情况下:重新渲染整个 Collection View 。这是非常非常糟糕的，而且完全无法维护。

总结:如果您的数据源没有返回一个对象数组，或者您没有解析响应并返回一个对象数组，n要填充的模型数量 - 然后定义一个集合几乎没有用。

希望您现在明白了。

非常有用的信息来源:

• > Backbone, The Primer: Models and Collections
• > Developing Backbone.js Applications
• > backbonejs.org