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

查看:172
本文介绍了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.

因此​​,whats模型的目的是什么?我相信,我可能没有使用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.

让我们假设你已经以下内容:

Let's assume you've the following:

//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数据,大概是这样的:

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
}

现在,你填写你的收集数据,通过调用它的方式:

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

CallsCollection.fetch();

您收集应该是这个样子:

Your collection should look something like:

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

中的数据将被添加到模式的属性哈希值。如果不指定特定的模型,巴特在他的答案提到,骨干将填充一个集合 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.

我们真正想要的是我们的集合,从服务响应的来电的属性填充其车型。为了解决这个问题,我们只需添加一个解析方法到我们的集合:

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.

您现在可以调用获取,保存,销毁,清晰和很多其他的方法轻松的上< STRONG>单个单元中的数据的(每个模型的),而不是保存在一个单一的模式对整个数据的障碍 - 这是pretty太多没用,您对遍历响应数据手动和执行 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 的车型数量要填充 - 然后定义的的是pretty无用

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.

希望,现在你的想法。

信息的非常有益的来源:

Very helpful source of info:

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

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

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