javascript - 在 Backbone.js 中缓存 View 子元素的模式

Question

从无框架的世界转移到 Backbone.js，我带来了通过始终存储对它们的引用(为了效率)来“缓存”我的 jQuery 对象的做法。

var myCachedEl = $('#element');
myCachedEl.on('click', function() {
  myCachedEl.html('That tickles.');
});

在 Backbone 中，这就是我缓存 jQuery 对象的方式:

var RandomView = Backbone.View.extend({

  intitialize: function() {
    this.$lastRoll = this.$el.find('#last-roll');
    this.listenTo(this.model, 'change', this.render);
  },

  render: function() {
    this.$lastRoll.html(this.model.get('lastRoll'));
  },

  events: {
    'click #last-roll': function() {
      this.model.roll();
    }
  }
});

var randomView = new RandomView({
  el: '#random-view',
  model: random
});

鉴于我的当前设置，我想做一些类似于的事情...

events: {
    'click this.$lastRoll': function() {
      // ...
    }
}

...在我的事件中，我可以将点击事件绑定(bind)到缓存元素。但是，上述语法不起作用。我怀疑可能有某种方法可以“正式”定义子元素，这样我就可以使用类似于上面的语法。

问题:是否有“更好”、“更干净”或更“ Backbone 语义”的模式，用于缓存我的 View 的子元素，我可以/应该遵循，而不是我的当前模式？

Answer 1

您正在正确缓存您的元素。简单地说，绑定(bind)事件处理程序的语法并不像您在问题中建议的那样工作。因为它以不同的方式工作。

您使用 events: { ... } 定义的所有事件都绑定(bind)到 View 的根元素 el，而不是子元素 最后一卷。当一个事件在您的 View 中触发时，它将冒泡到根元素，处理程序将在此处决定事件的 target 是否与选择器匹配。例如，在您的代码中:

events: {
    'click #last-roll': function...
}

绑定(bind)一个点击事件到RandomView，当点击发生时，它会检查目标是否是last-roll(即匹配选择器)，如果这个是真的你的处理程序将被调用。这就是为什么你在那里传递选择器而不是元素。它很有效，所以去做吧。

如果您仍然需要将事件绑定(bind)到其他元素(例如 global keypress event handling 的 document 等)，您可以使用 jQuery 的 on或 Backbone 的 listenTo .使用 on 时，您必须记住使用 off 注销处理程序。当删除 View 以防止内存泄漏时，使用 listenTo 时，您可以依赖 Backbone 本身进行的自动清理。