Как работает метод выборки модели backbone.js

Я очень запутался в использовании метода выборки модели 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}));, функция changeview выглядит так.

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

после просмотра рендеринга информация профиля пока не отображается, но после выполнения инструкции model.fetch(); будут отображены данные из модели, почему? Я действительно не знаю, как работает fetch, я пытаюсь выяснить, но никаких шансов.

Ответы

Ответ 1

Я не совсем уверен, что ваш вопрос здесь, но я сделаю все возможное, чтобы объяснить, что я могу.

Концепция urlRoot заключается в том, что базовый URL-адрес и дочерние элементы будут выбраны под ним с идентификатором, добавленным в этот urlRoot.

Например, следующий код:

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

установит базовый url. Затем, если вы должны создать экземпляр этого метода и вызвать 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();
}

Итак, если вы хотите, чтобы ваше представление обновлялось после того, как была выбрана модель, вы можете сделать это несколькими способами: (1) передать обратный вызов успеха в model.fetch() (2) зарегистрировать обработчик на вашем просматривать часы для события "sync", повторно отображать представление при его возврате (3) помещать код для создания вашего представления в успешный обратный вызов, таким образом представление не будет создано до тех пор, пока сетевой запрос не вернется, а ваша модель имеет свои данные.