2013-05-14 2 views
18

Я очень запутался в использовании метода выборки backbone.js. Смотрите следующий пример
магистральный маршрутизатор:как backbone.js модель fetch метод работает

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, я пытаюсь выяснить, но никаких шансов.

ответ

38

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

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

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

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

установит базовый URL. Затем, если вы должны были создать экземпляр этого и вызвать выборки():

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

было бы сделать следующий запрос:

GET /accounts/abcd1234 

В вашем случае, вы устанавливаете UrlRoot, а затем явно устанавливая URL поэтому urlRoot, который вы предоставили, будет проигнорирован.

Я призываю вас смотреть на источник Backbone (это удивительно лаконичен), чтобы увидеть, как происходит URL-адрес: http://backbonejs.org/docs/backbone.html#section-65

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

Это не мгновение.

Это делается неблокирующим образом, то есть он будет делать запрос, продолжать делать то, что он делает, и когда запрос возвращается с сервера, он запускает событие, которое использует 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) передайте успешный обратный вызов модели.fetch() (2) зарегистрировать обработчик на вашем часах просмотра для события «sync», повторно отображает представление при его возврате (3) помещает код для создания вашего представления в успешный обратный вызов, таким образом, представление не будет создаваться до тех пор, пока сетевой запрос не вернется, а ваша модель не будет иметь свои данные.

+0

сначала спасибо за ответ, это очень хорошее описание. У меня есть еще вопрос, после того, как fetch() выпустил событие sync, представление будет автоматически отображаться? предложения, которые вы мне даете, можете ли вы привести несколько примеров, потому что я довольно новичок в backbonejs и javascript, я хорошо знаю этот язык, но не очень хорошо. –

+0

urlroot будет отменен правильно? Суть этой базы var = _.result (это, 'urlRoot') || _.result (this.collection, 'url') || urlError() ;? –

+0

Для вашего первого вопроса ни одно событие синхронизации не будет автоматически отображать представление. Если вы хотите включить это, добавьте следующее: «view.on (« sync », this.render, this);» –

Смежные вопросы