视图渲染时触发多个事件

Question

我正在使用 Backbone.js 构建一个应用程序，但是我遇到了一个无法尽早解决的问题。

我现在有一个简单的列表/详细视图设置，但每次渲染详细视图时，我的事件都会变得复杂。例如，显示两个详细视图并单击链接将导致其被单击两次。

我的视图看起来像这样（用 CoffeeScript 编写）：

#
# Project List View
#
class ProjectListView extends Backbone.View

  el: $("#projectList")

events : {
  "click #addProject" : "createNewProject"
}

initialize : ->
  @template = _.template(app.projectListView)
  _.bindAll(this, "render", "createNewProject")
  @render()

createNewProject : (e) ->
  e.preventDefault()
  e.stopPropagation()
  tempProject = Projects.create({
    title : 'Test Project'
    description : ''
    browserDefault : 12
    lineHeight : 21
  })

render : =>
  $(@el).html(@template())
  @delegateEvents()
  return @

显然，事件已经结束，我没有触发任何点击事件。我在这里缺少什么？

Answer 1

您粘贴的代码似乎没有正确缩进。本来就是这样吗？

您不需要 _.bindAll 行。相反，只需使用 => 来定义您的方法（而不是 ->）

我做了一些风格上的更改并取出了额外的 @delegateEvents，正如朱利安建议的那样。看看这是否有效：

class ProjectListView extends Backbone.View

  el: $("#projectList")

  events:
    "click #addProject" : "createNewProject"

  initialize: =>
    @template = _.template(app.projectListView)
    @render()

  createNewProject: (e) =>
    e.preventDefault()
    e.stopPropagation()
    tempProject = Projects.create
      title: 'Test Project'
      description: ''
      browserDefault: 12
      lineHeight: 21

  render: =>
    @el.html @template()
    @

Answer 2

这是我对您的代码的评论。 Backbone 将根据您的事件选项自动委托事件（使用 delegateEvents）。您不必在渲染函数中执行此操作（很可能是向您抛出双重事件的原因）。从渲染中删除deleteEvents。

另外，@el 已经定义为 jQuery 对象，因此您不必在渲染中再次执行此操作。

您将创建 2 个项目列表视图吗？如果是这样，id 必须是唯一的...