Backbone.js 在集合中指定模型的目的是什么 [英] Backbone.js What is the purpose of specifying a model in collection

查看:16
本文介绍了Backbone.js 在集合中指定模型的目的是什么的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这就是我想要理解的.

我经常发现自己在写这样的主干:

Often times I find myself writing backbone like this:

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

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

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

It is a very basic example but as you can see, there is nothing really in the model all the data is coming into the Collection via an external url call to a json file that is build from a database.

那么模型的目的是什么?我敢肯定,我可能没有充分使用backbone.js,这就是我在这里问你们的原因.

So whats the purpose of the model? I am sure that I am probably not using backbone.js to its fullest extent which is why I am here asking you guys.

推荐答案

首先,模型中没有任何东西,所有数据都通过外部 url 调用进入集合"- 这不是真的.

First of all, "there is nothing really in the model all the data is coming into the Collection via an external url call" - this is not true.

假设您有以下内容:

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

(没有自定义属性或方法,扩展原始Backbone.Model是没有意义的)

(without custom attributes or methods, there is no point in extending the original Backbone.Model)

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

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

And the json data returned from service, probably something like:

//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 方法来用数据填充您的集合:

Now you populate your collection with data by calling it's fetch method:

CallsCollection.fetch();

您的收藏应该类似于:

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

数据将添加到模型的属性哈希中.如果您没有指定特定模型,如 Bart 在他的 answer 中提到的,主干将使用 Backbone.Model 实例:仍然没有多大用处 - Wew...一个集合,单个模型在其属性中具有完整的响应数据...

The data will be added to a model's attribute hash. If you don't specify a particular model, as Bart mentioned in his answer, backbone will populate the collection with a Backbone.Model instance: Which is still not much useful - Wew... A collection with single model having entire response data inside it's attributes as it is...

此时,您想知道为什么我什至要费心创建一个模型,然后创建一个集合..?

At this point, you're wondering why did I even bother creating a model, and then a collection..?

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

The problem here is Collections are derived from Arrays, while Models are derived from Objects. In this case, our root data structure is an Object (not an Array), so our collection tried to parse the returned data directly into a single model.

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

What we really want is for our collection to populate its models from the "calls" property of the service response. To address this, we simply add a parse method onto our collection:

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
  }
});

现在您的收藏将类似于以下内容:

Now your collection will be something like the following:

{
 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",
 ...
}

这——就是我们想要的!:现在处理数据非常容易:您可以使用添加、删除、查找、重置和 少数其他有效的收集方法.

This - is what we want! : Now it is very easy to handle the data: You can make use of the add, remove, find, reset and handful of other collection methods effectively.

您可以将此模型数组传递到您选择的模板库中,可能有两种绑定方式:当调用模型之一的相应视图发生更改时,特定模型将被更新,事件将从您的模型传播到集合, 并且特定的模型将被传递到处理函数中.

You can pass this models array into your templating library of choice, probably with two way bindings: When the respective view for one of the call model changes, the particular model will be updated, events will propagate from your models to the collection, and the particular model will be passed into the handler functions.

您现在可以轻松调用 fetch、save、destroy、clear 和 许多其他方法单个数据单元(每个模型),而不是将整个数据保存在单个模型中 - 这几乎没有用,您必须遍历响应手动数据并自行执行 CRUD 和类似操作,并且在大多数情况下:重新渲染整个集合视图.这是非常非常糟糕且完全无法维护的.

You can now call fetch, save, destroy, clear and a lot of other methods with ease on single unit's of data (each model), rather than hurdle with the entire data saved in a single model - which is pretty much useless, you've to iterate through the response data manually and perform CRUD and similar operations by your own, and in most cases: re-render the entire collection view. which is very, very bad and totally unmaintainable.

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

To conclude: If your data source doesn't return an array of objects, or you don't parse the response and return an array of objects from which n number of models are to be populated - Then defining a collection is pretty much useless.

希望现在你明白了.

非常有用的信息来源:

这篇关于Backbone.js 在集合中指定模型的目的是什么的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆