Ajax in Backbone fetch 在 fetch 调用退出后完成，因此 fetch 调用中没有 success/fail 事件

Question

在我的 Backbone 视图初始化中，我调用了覆盖的获取。 Fetch 检查数据是否在 localStorage 中，如果不在，则使用 ajax 拉取数据并填充到 localStorage 中。

但是，ajax 调用需要一些时间，因此 ajax 之前的提取方法 returns 完成。因此，原始的 fetch 调用永远不会触发成功事件。

如何从 fetch 内部触发成功事件？我还需要传递数据（一旦 ajax 完成）进行初始化（以某种方式返回它，或者再次调用成功事件调用 fetch() 以从 localStorage 中提取）。

谢谢！

在应用视图中初始化：

initialize: function() {
  var imageList = new ImageList(),
      simageel = $(this.el).find('#imagec'),
      simageView;
  imageList.fetch({
    error: function() { console.log(arguments); },
    success: function(collection) {
      collection.each(function (model) {
        simageView = new SImageView({
          model: model
        });
        simageel.html(simageView.render().el);
        console.log('Fetch success.');  // Never fires
      });
    }
  });

集合中的覆盖提取：

fetch: function(options) {
  if(!localStorage.getItem("image")) {
      var self = this;
      $.ajax({
        url: '[url]'  //Could add async but how to trigger render from this function?
      }).done(function(response) {            
        console.log("Fetched"); 
        $.each(response.items, function(i, item) {
          self.create(item);  // saves model to local storage
        });
      }).fail(function(response) {
         console.log("Failure in fetch");
      });
  } else {
      // fetch from localStorage works fine
      return Backbone.Collection.prototype.fetch.call(this, options);
  }
}

Answer 1

fetch: function(options) {
  if(!localStorage.getItem("image")) {
      var self = this;
      $.ajax({
        url: '[url]'  //Could add async but how to trigger render from this function?
      }).done(function(response) {            
        console.log("Fetched"); 
        $.each(response.items, function(i, item) {
          self.create(item);  // saves model to local storage
        });
        options.success(self); //call success func
        self.trigger('sync', self, response, options); //fire sync event
      }).fail(function(response) {
         console.log("Failure in fetch");
         options.error(responce) //call error func
      });
  } else {
      // fetch from localStorage works fine
      return Backbone.Collection.prototype.fetch.call(this, options);
  }
}

一旦你开始使用像 $.ajax 这样的异步函数，你就不能为下一个 return 值使用 method.You 需要调用回调。

原始 Backbone 在 model/collection 完成获取时触发 sync 事件。所以在你的代码中做同样的事情。并在 View 构造函数中执行 listenTo 到运行下一个方法。

initialize: function() {
  var imageList = new ImageList(),
      simageel = $(this.el).find('#imagec'),
      simageView;
  this.listenToOnce(imageList,"sync",function(){
    console.log("call next method what you want to do after fetching's finished");
  });
  imageList.fetch({
    error: function() { console.log(arguments); },
    success: function(collection) {
      collection.each(function (model) {
        simageView = new SImageView({
          model: model
        });
        simageel.html(simageView.render().el);
        console.log('Fetch success.');  // Never fires
      });
    }
  });

Ajax in Backbone fetch 在 fetch 调用退出后完成，因此 fetch 调用中没有 success/fail 事件

Ajax in Backbone fetch finishes after fetch call exits, so no success/fail event in fetch call

javascript

ajax

jquery

fetch

backbone.js