在Backbone.js中缓存视图的子元素的模式

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() {
      // ...
    }
}

...在我的事件中，我可以将click事件绑定到缓存的元素。 但是，以上语法不起作用。 我怀疑可能存在某种“正式”定义子元素的方法，因此我可以使用类似于上面的语法。

问题：是否有一个“更好”，“更干净”或更多的“主干语义”模式来缓存我可以/应该遵循的View子元素，而不是当前的模式？

Answer 1

您正在正确缓存元素。 简而言之，绑定事件处理程序的语法并不像您在问题中提出的那样起作用。 因为它以不同的方式工作。

您使用events: { ... }定义的所有事件都绑定到视图的根元素el ，而不绑定到子元素last-roll 。 当事件在您的视图中触发时，它将冒泡直至根元素，处理程序将在该处确定事件的target是否与选择器匹配。 例如，在您的代码中：

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

将click事件绑定到RandomView ，当发生单击时，它将检查目标是否为last-roll （即与选择器匹配），并且如果为true，则将调用您的处理程序。 这就是为什么您传递选择器而不是其中的元素的原因。 它很有效，所以去吧。

如果仍然需要将事件绑定到其他元素（例如用于全局按键事件处理的 document等），则可以使用jQuery的on或Backbone的listenTo 。 使用on ，必须记住在删除视图时使用off来注销处理程序，以防止内存泄漏，而使用listenTo您可以依靠Backbone本身进行的自动清理。