我对使用backbone.js模型获取方法非常困惑。请参阅以下示例
骨干路由器:
profile: function(id) {
var model = new Account({id:id});
console.log("<---------profile router-------->");
this.changeView(new ProfileView({model:model}));
model.fetch();
}
第一步,模型账户将被实例化,账户模型如下所示。
define(['models/StatusCollection'], function(StatusCollection) {
var Account = Backbone.Model.extend({
urlRoot: '/accounts',
initialize: function() {
this.status = new StatusCollection();
this.status.url = '/accounts/' + this.id + '/status';
this.activity = new StatusCollection();
this.activity.url = '/accounts/' + this.id + '/activity';
}
});
return Account;
});
urlRoot属性是什么?创建模型对象后,将使用此 this.changeView(新的ProfileView({model:model})); 呈现profileview,changeview函数如下所示。
changeView: function(view) {
if ( null != this.currentView ) {
this.currentView.undelegateEvents();
}
this.currentView = view;
this.currentView.render();
},
在渲染视图之后,配置文件信息将不会显示,但在 model.fetch(); 语句执行后,将显示模型中的数据,为什么?我真的不知道获取是如何工作的,我试图找出,但没有机会。
答案 0 :(得分:42)
我不完全确定你的问题是什么,但我会尽力解释我的问题。
urlRoot背后的概念是基本URL,子元素将在其下面获取,并将id添加到该urlRoot。
例如,以下代码:
var Account = Backbone.Model.extend({
urlRoot: '/accounts'
});
将设置基本网址。然后,如果你要实例化它并调用fetch():
var anAccount = new Account({id: 'abcd1234'});
anAccount.fetch();
它会提出以下要求:
GET /accounts/abcd1234
在您的情况下,您正在设置urlRoot,然后明确设置网址,以便忽略您提供的urlRoot。
我鼓励您查看Backbone来源(令人惊讶的简洁),看看网址是如何派生的:http://backbonejs.org/docs/backbone.html#section-65
要回答您的其他问题,您的个人资料信息不会立即显示的原因是fetch()会转到网络,转到您的服务器,并且必须等待回复才能显示。
这不是即时的。
它以非阻塞方式完成,这意味着它将发出请求,继续执行它正在做的事情,当请求从服务器返回时,它会触发Backbone用来确保其他任何事情的事件必须完成,现在你已经完成了模型的数据。
我在您的代码段中添加了一些注释来解释这里发生了什么:
profile: function(id) {
// You are instantiating a model, giving it the id passed to it as an argument
var model = new Account({id:id});
console.log("<---------profile router-------->");
// You are instantiating a new view with a fresh model, but its data has
// not yet been fetched so the view will not display properly
this.changeView(new ProfileView({model:model}));
// You are fetching the data here. It will be a little while while the request goes
// from your browser, over the network, hits the server, gets the response. After
// getting the response, this will fire a 'sync' event which your view can use to
// re-render now that your model has its data.
model.fetch();
}
因此,如果您想确保在获取模型后更新视图,可以采用以下几种方法:(1)将成功回调传递给model.fetch()(2)在您的注册表上注册处理程序查看监视'sync'事件,在返回时重新呈现视图(3)将代码用于在成功回调中实例化视图,这样在网络请求返回和模型之前不会创建视图有它的数据。