javascript - 在所有元素上触发的主干事件监听器

Question

我目前正在尝试仅在悬停元素上触发 Bootstrap 弹出窗口。不幸的是，它触发了页面上的所有内容。下面是 Backbone 脚本(在 CoffeeScript 中):

Site.Views.Stories ||= {}

class Site.Views.Stories.IndexView extends Backbone.View
  template: JST["backbone/templates/stories/index"]

  initialize: () ->
    @options.stories.bind('reset', @addAll)

  addAll: () =>
    @options.stories.each(@addOne)

  addOne: (story) =>
    view = new Site.Views.Stories.StoryView({model : story})
    @$("#columns").append(view.render().el)

  render: =>
    $(@el).html(@template(stories: @options.stories.toJSON() ));
    @addAll()
    return this

  events: =>
    "mouseover .rating" : this.showhover

  showhover: => 
    this.$('.rating').popover('show');

Answer 1

我猜你在 View 的 el 中有多个 .rating 元素，所以这个:

this.$('.rating').popover('show');

全部击中。如果您只想要接收事件的 .rating，那么请从事件处理程序的事件参数中获取特定的 .rating:

showhover: (ev) =>
  $(ev.currentTarget).popover('show')

---

我在这里还有一些其他事情:

1. Backbone 不再自动设置@options，如果你想要@options，那么你必须在initialize中手动设置:

   initialize: (@options) -> ...
   

2. 您不需要为您的事件使用函数，这样就可以了:

   events:
     "mouseover .rating" : 'showhover'
   

3. 您不需要 => 您所有的方法。除了 @addAll 之外，我认为你不需要为它们中的任何一个做这件事(假设你使用 events 对象而不是函数)但你可以绕过那个通过使用 @listenTo 或向 bind 提供第三个参数.