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必须是唯一的......

在视图渲染上触发的多个事件

2 个答案: