如何从多个网址获取模型时渲染视图

Question

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

这个模型从多个urls中获取数据，而我的实际问题是视图在所有数据被分配给模型之前进行渲染，而在其他情况下，当所有的数据已经分配给模型。

我正在使用$ .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

您需要从getAvailableDays返回jqXHR（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连接将立即执行

你会发现在内部构件骨干是fetch返回从AJAX调用，类似于jqXHR对象是什么，你应该用getAvailableDays

做