Загрузка модельных отношений с Backbone.js - PullRequest
Новая
       25

Загрузка модельных отношений с Backbone.js

3 голосов
/ 12 февраля 2012

Я пишу свое первое приложение Backbone.js с бэкэндом Rails REST, и одна вещь, которая меня озадачивает, это взаимоотношения между моделями.

Это приложение, которое я пишу, будет иметь Ticket и Client в качестве моделей. Я также настроил коллекции Tickets и Clients.

Оказывается, у меня есть несколько тысяч клиентов, и я не хотел бы загружать их в память, вместо этого я хотел бы лениво загружать клиента, когда билет ссылается на него.

Я попробовал очень наивный подход, который явно не работает, потому что Model#fetch() метод является асинхронным.

Вот моя модель Ticket (в CoffeeScript ): 

class Deputy.Models.Ticket extends Backbone.Model

    initialize: ->
        @fetchClient()

    fetchClient: ->
        @client = new Deputy.Models.Client()
        @client.set id: @get('userid')
        @client.fetch()

    clientName: ->
        first = @client.get('firstname')
        last = @client.get('lastname')
        "#{first} #{last}"

Как вы можете себе представить, функция clientName() всегда возвращает "undefined undefined", потому что fetch не возвращался при совершении вызова.

Как правильно обрабатывать такие типы отношений данных? Обратите внимание, что я не против, если вы сделаете шаг назад и скажете, что я использую неправильный подход, и предложите мне что-то вместо этого.

Будем весьма благодарны за любые указатели, статьи или что-нибудь еще.

1 Ответ

5 голосов
/ 12 февраля 2012

client.fetch() принимает опцию success, которая будет запущена после завершения. Когда вы запускаете fetchClient, вы должны добавить пользовательский интерфейс загрузки (это может быть что-то столь же простое, как замена кнопки с вращающимся значком), а когда клиент завершит загрузку, продолжите отображать имя.

В JavaScript вы бы сделали что-то вроде этого: 

fetchClient: function() {
  var client = new Deputy.Models.Client();
  client.set({ id: this.get('userid') });
  client.fetch({ success: this.fetchClientSuccess });
  // Or maybe the following depending on how you set up your code.
  // client.fetch({ success: Deputy.Models.fetchClientSuccess });
},

fetchClientSuccess: function(lead, response) {
  Deputy.Models.clientName(lead);
}
...