javascript - 如何在索引视图上添加微调器以在 Backbone 中获取？

Question

这是我收藏的视图：

Network.Views.Offers.Index = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, 'render');
    this.collection = new Network.Collections.Offers();
    this.collection
    .on('reset', this.render)
    .fetch();
  },

  render: function() {
    var self = this;
    _.each(this.collection.models, function(model) {
      var view = new Network.Views.Offers.Offer({ model: model });
      $(self.el).append(view.el);
      view.adjustHeight();
    });
    return this;
  },
});

成功获取后，我尝试添加和删除微调器类：

this.$el.append('<div class="loading">Loading...</div>');
this.collection
.on('reset', this.render)
.fetch({
  success:function() {
    this.$el.removeClass('loading');
  }
});

但我得到：

Uncaught TypeError: Cannot call method 'removeClass' of undefined 

Answer 1

this.$el.append('<div class="loading">Loading...</div>');

在 $el 元素中添加一个具有加载类的 div。

this.$el.removeClass('loading');

removeClass 不会删除具有指定类的元素中的元素。

尝试：

this.$el.append('<div class="loading">Loading...</div>');
var $this = this; // maintain the context of this within the success callback
this.collection
.on('reset', this.render)
.fetch({
  success:function() {
    $this.$('.loading').remove();
  }
});

Answer 2

您收到 TypeError 是因为$el未this在success回调中定义。这是因为this在success回调中不是指您的Index视图。

您需要绑定this到该回调以this引用该回调中的Index视图。

success:function() {
  this.$el.removeClass('loading');
}.bind(this)

在 MDN 上阅读bind