javascript - 从多个 url 获取模型时如何渲染 View

Question

我正在使用backbone.js进行项目，我面临的问题是我有一个不需要与服务器同步的模型，该模型仅用于获取用户数据以初始化其余部分对于 View 而言，它是应用程序的包装 View ，并附有模型。

该模型从多个网址获取数据，我的实际问题是，在某些情况下， View 是在所有数据分配给模型之前渲染的，而在其他情况下，是在所有数据已经​​分配给模型时渲染的。

我正在使用 $.when() 获取模型并调用 .done() 来渲染 View ，但我认为我不理解延迟对象的概念。想知道你们有什么样的建议来继续解决这个问题。我给你留下了一个关于我的代码如何的例子。

型号

      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 文档:

If a single argument is passed to jQuery.when() and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately

您会在 Backbone 内部发现 fetch 从 ajax 调用返回 jqXHR 对象，类似于您应该使用 getAvailableDays 执行的操作