1

从无框架世界转移到 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() {
      // ...
    }
}

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

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

4

1 回答 1

2

您正在正确缓存元素。简单地说，绑定事件处理程序的语法不能按照您在问题中提出的方式工作。因为它以不同的方式工作。

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

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

将点击事件绑定到RandomView，当点击发生时，它将检查目标是否last-roll（即匹配选择器），如果为真，您的处理程序将被调用。这就是为什么你在那里传递选择器而不是元素的原因。效率很高，所以加油。

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

于 2013-08-18T01:01:09.607 回答