Как подождать, чтобы просмотреть вид в backbone.js до тех пор, пока выборка не будет завершена?

Я пытаюсь понять, как работает часть backbone.js. Мне нужно собрать коллекцию моделей после начала приложения. Мне нужно подождать, пока выборка не будет завершена, чтобы отобразить каждое представление. Я не уверен на 100% наилучшего подхода к этому экземпляру.

var AppRouter = Backbone.Router.extend({
    routes: {
        "": "home",
        "customer/:id": "customer" 
    },

    home: function () {
        console.log("Home");
    },

    customer: function (id) {
        if (this.custromers == null)
            this.init();

        var customer = this.customers.at(2); //This is undefined until fetch is complete. Log always says undefined.
        console.log(customer);
    },

    init: function () {
        console.log("init");
        this.customers = new CustomerCollection();
        this.customers.fetch({
            success: function () {
                console.log("success"); 
                // I need to be able to render view on success.
            }
        });
        console.log(this.customers);
    }
});

Ответ 1

Недавно я написал несколько статей об этом. Они должны помочь:

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

Асинхронная загрузка HTML-шаблонов для топовых видов

Ответ 2

Метод, который я использую, - это полный обратный вызов jQuery следующим образом:

var self = this;
this.model.fetch().done(function(){
  self.render();
});

Это было рекомендовано в отчете об ошибках . Хотя в отчете об ошибке рекомендуется использовать complete, этот метод обратного вызова с тех пор устарел в пользу done.

Ответ 3

Вы также можете сделать это с помощью jquery 1.5 +

$.when(something1.fetch(), something2.fetch()...all your fetches).then(function() {
   initialize your views here
});

Ответ 4

Вы можете отправить свои собственные параметры .success к методу выборки коллекций, который выполняется только после завершения выборки

EDIT (супер поздно!)

От источника магистрали (стартовая линия 624 в 0.9.1)

fetch: function(options) {
  options = options ? _.clone(options) : {};
  if (options.parse === undefined) options.parse = true;
  var collection = this;
  var success = options.success;
  options.success = function(resp, status, xhr) {
    collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);
    if (success) success(collection, resp);
  };

Обратите внимание на вторую в последнюю строку. Если вы передали функцию в объекте options в качестве ключа success, это вызовет ее после того, как коллекция будет проанализирована в моделях и добавлена в коллекцию.

Итак, если вы это сделаете:

this.collection.fetch({success: this.do_something});

(предполагая, что метод initialize является привязкой this.do_something к this...), он будет вызывать этот метод ПОСЛЕ целого shebang, позволяя вам запускать действия сразу же после fetch/parse/attach

Ответ 5

Другим полезным способом может быть загрузка в данные непосредственно при загрузке страницы. Это, если из FAQ:

Загрузка загруженных моделей

Когда ваше приложение сначала загружается, обычно имеет набор исходных моделей, которые, как вы знаете, вам понадобятся, чтобы отобразить страницу. Вместо того, чтобы запускать дополнительный запрос AJAX для их получения, более приятным шаблоном является то, что их данные уже загружены на страницу. Затем вы можете использовать reset для заполнения ваших коллекций исходными данными. В DocumentCloud в шаблоне ERB для рабочего пространства мы делаем что-то в этом направлении:

<script>
  var Accounts = new Backbone.Collection;
  Accounts.reset(<%= @accounts.to_json %>);
  var Projects = new Backbone.Collection;
  Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>

Ответ 6

Другим вариантом является добавление следующего внутри метода инициализации ваших коллекций:

this.listenTo(this.collection, 'change add remove update', this.render);

Это отключит метод рендеринга всякий раз, когда выборка будет завершена и/или коллекция будет обновлена программно.

Ответ 7

Способы использования и выключения можно использовать

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

    _this.companyList.on("reset", _this.render, _this);
    _this.companyList.fetchCompanyList({firstIndex: 1, maxResult: 10},     _this.options);

в модели js, пожалуйста, используйте как

    fetchCompanyList: function(data, options) {
    UIUtils.showWait();
    var collection = this;
    var condition = "firstIndex=" + data.firstIndex + "&maxResult=" + data.maxResult;
    if (notBlank(options)) {
        if (notBlank(options.status)) {
            condition += "&status=" + options.status;
        }
    }
    $.ajax({
        url: "webservices/company/list?" + condition,
        type: 'GET',
        dataType: 'json',
        success: function(objModel, response) {
            UIUtils.hideWait();
            collection.reset(objModel);
            if (notBlank(options) && notBlank(options.triggerEvent)) {
                _this.trigger(options.triggerEvent, _this);
            } 
        }
    });
}