javascript - Backbone event listener triggering on all elements

Question

I'm currently attempting to trigger a Bootstrap popover only on the hovered element. Unfortunately it's triggering on all that are on the page. Below is the Backbone script (in 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

我猜你.rating的视图中有多个元素，el所以：

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

击中他们。如果您只是想要.rating接收事件的那个，那么通过.rating从事件处理程序的事件参数中获取特定的来说明：

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

---

我在这里的时候还有一些其他的事情：

1. Backbone 不再自动设置@options，如果需要@options，您必须手动设置initialize：

   initialize: (@options) -> ...
   

2. 您不需要为您的 使用函数events，这样就可以了：

   events:
     "mouseover .rating" : 'showhover'
   

3. 你不需要=>所有的方法。我认为您不需要为其中任何一个执行此操作（假设您使用events对象而不是函数）@addAll，但您可以通过使用@listenTo或提供第三个参数来解决该问题bind。