Question

我在使用backbone.js的项目中工作，我面临的问题是我有一个不需要与服务器同步的模型，这个模型只是为了获取用户数据来初始化其余的视图，它是一个附加模型的应用程序的包装视图。

此模型从多个网址获取数据，我的实际问题是在某些情况下所有数据都分配给模型之前视图正在呈现，而在其他情况下，在所有数据都已分配给模型时呈现。

我使用$ .when（）来获取模型并调用.done（）来渲染视图，但我想我不理解延迟对象的概念。想知道你们有什么样的建议才能解决这个问题。我给你一个关于我的代码如何的例子。

模型

      var userModel = Backbone.Model.extend({
        url: "/api/vacationtypes.json",
        defaults: {
          userName: 'anonymous',
          availableDays: 0,
          vacationType: []
        },

        initialize: function() {
          var that = this;
          _.bindAll(this,'parseAvailableDays');
        },

        parse: function(data){
          return {vacationType: data.data}
        },

        getAvailableDays: function() {
          $.ajax({
            url: "/api/staffAvailableDays/get/" + Zvacations.session.email + ".json",
            success: this.parseAvailableDays
          });
        },

        parseAvailableDays: function(response) {
          this.set('availableDays', response.data[0].availableDays);
        }

      });

查看

  var Home = Backbone.View.extend({
    tagName: "section",
    className: "home",
    el: "#request-form"

    events: {
         // events for the view
    },

    initialize: function(){
      var that = this;
      this.setPageTitle('Home');
      this.model.on('change:availableDays', this.render, this);
      //  once all fetches for model are done render the view (sometime execute before the succes of getAvailableDays)
      $.when( this.model.fetch(), this.model.getAvailableDays() ).done(function(){
        that.render();
      });
    },

    render: function(){
      var template = _.template(homeViewTemplate, this.model.toJSON());
      this.$el.html(template);
      // get holydays from db
      this.getHolidays();
      //assign total steps after render
      this.totalSteps = $(homeViewTemplate).find('fieldset').length
      // initialize jQuery UI datepicker
      this.dateSelectorView();

      return this;
    },

    // here goes rest of the view methods          

   });

希望你们能帮助我弄清楚哪一个是最好的等待方式，直到所有的提取都完成呈现。

Answer 1

您需要从jqXHR返回getAvailableDays（ajax返回值），以便它可以与$.when

一起使用

getAvailableDays: function() {
  return $.ajax({
    url: "/api/staffAvailableDays/get/" + Zvacations.session.email + ".json",
    success: this.parseAvailableDays
  });
},

您现有的代码会将getAvailableDays和fetch的返回值传递给$.when。当您不从getAvailableDays返回任何内容时，您的代码将等同于以下内容：

$.when(this.model.fetch(), undefined).done(function() {
    that.render();
});

忽略getAvailableDays内的ajax调用。

来自jQuery文档：

如果将单个参数传递给jQuery.when（）并且它不是延期或承诺，它将被视为已解决的延期和附加的任何doneCallbacks将立即执行

你会在Backbone内部找到fetch从ajax调用返回jqXHR对象，类似于你应该对getAvailableDays

做的事情

如何从多个URL中获取模型时呈现视图

1 个答案: