Backbone fetch中的Ajax在fetch调用退出后完成，因此fetch调用中没有成功/失败事件

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

本文关键字：fetch 调用 成功 事件 失败 因此 Ajax 中的 退出 Backbone      更新时间：2023-09-26

在我的Backbone视图初始化中，我调用一个重写的fetch。Fetch检查数据是否在localStorage中，如果没有，则使用ajax提取数据并填充到localStorage中。

但是，ajax调用需要一些时间，所以fetch方法在ajax完成之前返回。因此，原始的fetch调用从未触发成功事件。

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

谢谢！

在appview中初始化：

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);
  }
}

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这样的异步函数，就不能为下一个方法使用返回值。您需要调用callback。

当模型/集合完成提取时，原始主干激发sync事件。所以在你的代码中做同样的事情。并在View构造函数中执行CCD_ 2以运行下一个方法。

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
      });
    }
  });
相关文章：