javascript - 为什么我的 View 事件没有触发？

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"

这仅仅意味着您将拥有 <form class=​"search">​</form>​在@el 。这些设置不会将您的 View 绑定(bind)到 form.search 的内容。选择器匹配，并且您永远不会添加 @el到 DOM，这样你的事件最终就不会绑定(bind)到任何东西。

如果您想使用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/ambiguous/ubqqE/

如果您想绑定(bind)到现有 HTML，那么您可以使用 el而不是tagName和className像这样:

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

演示:http://jsfiddle.net/ambiguous/FfDg6/