backbone.js中模型之间的关系(Relation between models in backbone.js)

backbone.js中模型之间的关系(Relation between models in backbone.js)

我正在寻找正确的骨干结构来实现以下目标：

两个服务器API：

GET api/event/4 ：返回id为4的事件对象。 GET api/event/4/registrations ：返回属于id为4的事件的注册对象列表

我想要一个显示事件对象和注册列表的视图。

这非常简单，但我无法弄清楚如何组织我的事件和注册模型。 我应该使用骨干关系吗？

我的事件模型目前是这样的:(该集合预计将包含从现在开始的下10个事件）。

我应该如何定义我的注册模型以及如何初始化它，因为它知道它总是在事件模型的上下文中？

var app = app || {}; app.EventModel = Backbone.Model.extend({ urlRoot: app.API_server + 'event' }); app.EventCollection = Backbone.Collection.extend({ model: app.EventModel, url: app.API_server + 'event', initialize: function(){ dt = new Date(); start_dt = dt.toISOString(); this.fetch({ data: {limit:10, start_dt:start_dt}, error: function (model, response, options) { if(response.status == '403') { app.Session.logout(); } } }) } });

I'm looking for the correct backbone structure to achieve the following:

Two server APIs:

GET api/event/4 : returns the event object with id 4. GET api/event/4/registrations : returns the list of registration objects belonging to event with id 4

I want a view displaying the event object and the list of registrations.

This is very straightforward but I cannot figure out how to organize my Event and Registration models. Should I use backbone-relational?

My Event model is currently like this: (the collection is expected to contain the next 10 events from now).

How should I define my Registration model and how will I initialize it, knowing that it is always in the context of an Event model?

var app = app || {}; app.EventModel = Backbone.Model.extend({ urlRoot: app.API_server + 'event' }); app.EventCollection = Backbone.Collection.extend({ model: app.EventModel, url: app.API_server + 'event', initialize: function(){ dt = new Date(); start_dt = dt.toISOString(); this.fetch({ data: {limit:10, start_dt:start_dt}, error: function (model, response, options) { if(response.status == '403') { app.Session.logout(); } } }) } });

最满意答案

为注册创建一个集合，并将url属性用作函数。 默认情况下， urlRoot模型的urlRoot将是附加了id的集合的url 。

app.RegistrationCollection = Backbone.Collection.extend({ url: function() { return app.API_server + 'event/' + this.id + '/registrations'; }, initialize: function(models, options) { options = options || {}; this.id = options.id; } });

然后，在EventModel初始化时，添加RegistrationCollection作为属性，将事件id作为选项传递给集合。

app.EventModel = Backbone.Model.extend({ urlRoot: app.API_server + 'event', initialize: function() { this.registrations = new app.RegistrationCollection(null, { id: this.id }); } });

从init中删除fetch ，你想让你的集合可以重用。

app.EventCollection = Backbone.Collection.extend({ model: app.EventModel, url: app.API_server + 'event', });

在视图或路由器中获取，具体取决于它对您的应用更有意义的位置。

var EventView = Backbone.View.extend({ initialize: function() { this.collection = new app.EventCollection(); var dt = new Date(), start_dt = dt.toISOString(); // this should be here, outside of the collection. this.collection.fetch({ data: { limit: 10, start_dt: start_dt }, error: function(model, response, options) { if (response.status === 403) { app.Session.logout(); } } }); }, });

Make a collection for the registration and use the url property as a function. By default, the urlRoot of the models of the RegistrationCollection will be the url of the collection with their id appended.

app.RegistrationCollection = Backbone.Collection.extend({ url: function() { return app.API_server + 'event/' + this.id + '/registrations'; }, initialize: function(models, options) { options = options || {}; this.id = options.id; } });

Then, on EventModel initializing, add a RegistrationCollection as a property, passing the event id as an option to the collection.

app.EventModel = Backbone.Model.extend({ urlRoot: app.API_server + 'event', initialize: function() { this.registrations = new app.RegistrationCollection(null, { id: this.id }); } });

Remove the fetch from the init, you want to make your collection reusable.

app.EventCollection = Backbone.Collection.extend({ model: app.EventModel, url: app.API_server + 'event', });

Fetch inside the view or the router, depending on where it makes more sense for your app.

var EventView = Backbone.View.extend({ initialize: function() { this.collection = new app.EventCollection(); var dt = new Date(), start_dt = dt.toISOString(); // this should be here, outside of the collection. this.collection.fetch({ data: { limit: 10, start_dt: start_dt }, error: function(model, response, options) { if (response.status === 403) { app.Session.logout(); } } }); }, });