backbone.js - 骨架.js模型获取方法如何工作

Question

我对使用 Backbone .js模型获取方法感到非常困惑。请参阅以下示例
Backbone 路由器:

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(new ProfileView({model:model}))渲染profileview。 ，changeview函数如下所示。

changeView: function(view) {
  if ( null != this.currentView ) {
    this.currentView.undelegateEvents();
  }
  this.currentView = view;
  this.currentView.render();
},

渲染 View 之后，配置文件信息将不会显示，但是会在 model.fetch()之后显示； 语句执行后，将显示来自模型的数据，为什么？我真的不知道如何获取，我试图找出答案，但是没有机会。

Answer 1

我不确定您要问的是什么，但是我会尽力向您解释。

urlRoot背后的概念是基本URL，子元素将在其下面获取，并将id添加到该urlRoot。

例如，以下代码:

var Account = Backbone.Model.extend({
    urlRoot: '/accounts'
});

将设置基本网址。然后，如果要实例化它并调用fetch():

var anAccount = new Account({id: 'abcd1234'});
anAccount.fetch();

它将发出以下请求:

GET /accounts/abcd1234

在这种情况下，您要设置urlRoot，然后显式设置一个url，这样您提供的urlRoot将被忽略。

我鼓励您研究Backbone源(非常简洁)，以了解URL的派生方式: 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();
}

因此，如果您想确保在获取模型后更新 View ，可以采用以下几种方法:(1)将成功回调传递给model.fetch()(2)在 View 上注册一个处理程序，以监视'sync'事件，在返回时重新呈现 View (3)将用于实例化 View 的代码放入成功回调中，这样，只有在网络请求返回并且模型具有其数据之后，才会创建 View 。