Backbone：绑定到视图的包装 div

Question

我有一个主干 IndexView，它为每个“任务”模型调用一个 TaskView。我想将一个事件绑定到包装任务视图的li元素。例如，“className”属性是“task”，我想在“.task”上触发一个事件。

我可以从父 (IndexView) 视图绑定，但我想访问点击视图内的信息，我猜这意味着事件应该绑定到子 TaskView(?)

（另外，DOM 类内部可以访问实际的任务模板...只是不能访问包装的 .task li）

任何想法表示赞赏 - 代码如下。

儿童视图

Backbonescaffolddemo.Views.Tasks ||= {}

class Backbonescaffolddemo.Views.Tasks.TaskView extends Backbone.View
  template: JST["backbone/templates/tasks/task"]

  tagName: "li"
  className: "task"

  events:
    "click .task"    : "demoMethod"

  initialize: () ->
    _.bindAll(this, 'demoMethod', 'render')
    console.log @
    #@showTask()
    @el.id = 'sort_order_' + @model.get('id') if @model

  destroy: () ->
    @model.destroy()
    this.remove()
    return false

  demoMethod: () ->
    console.log 'Work dammit, work. Arghhh'

  render: ->
    $(@el).html(@template(@model.toJSON() ))    
    return this

父视图

Backbonescaffolddemo.Views.Tasks ||= {}

class Backbonescaffolddemo.Views.Tasks.IndexView extends Backbone.View
  template: JST["backbone/templates/tasks/index"]
  id: "taskList"

  events: 
    "keyup #searchTasks" : "searchTasks"

  initialize: () ->
    _.bindAll(this, 'addOne', 'sortable', 'task_id_from_element', 'addAll', 'searchTasks', 'updateSort', 'sortable', 'render')
    @options.tasks.bind('reset', @addAll)
    @options.tasks.bind('reset', @sortable)
    @options.tasks.bind('add', @render)
    @updateSort()
    @sortable()

  #...

  addAll: () ->
    @options.tasks.each(@addOne)

  addOne: (task) ->
    view = new Backbonescaffolddemo.Views.Tasks.TaskView({model: task})
    $(@el).append(view.render().el)

  render: ->
    $(@el).html(@template(tasks: @options.tasks.toJSON() ))
    @addAll() 
    return this

Answer 1

啊——找到了。直接“点击”：“demoMethod”（没有指定 DOM 范围）就可以完成这项工作。

Answer 2

我没有看到您在哪里添加了包装 TaskView 的 div。

默认情况下，Backbone 视图包裹在 div 中，但由于您将 TaskView 上的 tagName 设置为 li，它将被包裹在 li 而不是 div 中。