为什么我的视图事件没有触发？

Question

这是我的 CoffeeScript 代码：

$(document).ready ->
  SearchView = Backbone.View.extend
    tagName: "form"
    className: "search"
    events: {
      "click label":"search"
    }
    search: ->
      console.log("HERE")

  searchView = new SearchView()

这是我的 HTML：

%form#search.search
  %label
    Search
  %input

但单击表单不会触发任何事件。有什么想法吗？

Answer 1

您误解了 tagName 和 className 的工作原理。当您设置这些时：

tagName: "form"
className: "search"

这仅意味着您将拥有

; 在 @el 中。这些设置不会将您的视图绑定到 form.search 选择器匹配的内容，并且您永远不会将 @el 添加到 DOM，因此您的事件最终不会绑定到任何内容根本不。

如果您想使用 tagName 和 className 那么您将需要 render 来充实您的表单：

render: ->
    $(@el).append('<label>Search</label><input>')
    @

然后您将调用 render 并将 el 添加到 DOM，如下所示：

searchView = new SearchView()
$('div').append(searchView.render().el) # 'div' is just an example of course

演示：http://jsfiddle.net/ambigously/ubqqE/

如果你想绑定到现有的 HTML，那么你可以使用 el 而不是 tagName 和 className 像这样：

SearchView = Backbone.View.extend
    el: '#search'
    #...

演示：http://jsfiddle.net/ambiguously/FfDg6/