3

我正在使用 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 @

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

4

2 回答 2

3

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

你不需要这_.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()
    @
于 2011-02-16T19:16:11.413 回答
2

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

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

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

于 2011-02-15T20:27:11.223 回答