【问题标题】：Backbone.js / Coffeescript -- mapping simple click eventBackbone.js / Coffeescript -- 映射简单的点击事件
【发布时间】：2011-11-25 19:15:39
【问题描述】：

我遇到了backbone.js 的盲点。我已经写了这段代码，我想做的就是得到在按钮单击时呈现的测试 div。如果我在initialize() 函数中调用render()，它会渲染。但是，我从不触发render() 函数来响应点击事件。

我错过了什么？

谢谢！

HTML 容器

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <!-- / Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta content='IE=edge,chrome=1' />
    <meta http-equiv='X-UA-Compatible' />
    <link type="text/css" rel="stylesheet" href="/stylesheets/site.css" media="screen" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/underscore-min.js"></script>
    <script type="text/javascript" src="/javascripts/backbone-min.js"></script>
    <script type="text/javascript" src="/javascripts/application.js"></script>
    <script type="text/javascript" src="/javascripts/sample_data.js"></script>
    <title>The Middleman!</title>
  </head>
  <body class='page_classes'>
    <div id='main' role='main'>
      <h1>The Middleman is watching.</h1>
      <div id='band-app'>
        <button id='new-band'>new band</button>
      </div>
    </div>
  </body>
</html>

简单视图的咖啡脚本

SAMPLE_TEMPLATE = """
<div id="my-fine-id">
  My fine id!!!
</div>
"""

$ ->
  class AppView extends Backbone.View
    render: ->
      console.log "rendering"
      @template = _.template SAMPLE_TEMPLATE, {}
      @el.html @template

    initialize: ->
      console.log "constructing"
      @el = $('#band-app')
      @events = {"click button#new-band": "render"}

  app = new AppView()

【问题讨论】：

标签： backbone.js coffeescript

【解决方案1】：

马吕斯说的是对的。

通常您希望在类定义中指定events，而不是在初始化程序中。事实上，对于这个示例，您根本不需要 initialize 函数：

class AppView extends Backbone.View

  events:
    'click button': 'render'

  render: ->
    @$el.html _.template SAMPLE_TEMPLATE, {}

$ ->
  new AppView el:$('#band-app')

【讨论】：

问题的另一半是他在initialize 中更改@el，在较新的Backbone 中他应该使用setElement（当然在设置@events 之后）。

【解决方案2】：

我认为设置事件处理的delegateEvents 在View 构造函数中被调用，在initialize 被调用之前，所以要么在你的initialize 方法中显式调用它（在你设置了events 映射），或确保将 events 映射设置为构造 View 类本身的一部分，请参阅：

http://documentcloud.github.com/backbone/#View-extend

【讨论】：

谢谢！我正在使用constructor: 函数但切换到initialize: 以便让Backbone 构造。在分配initialize: 中的事件哈希后立即调用@delegateEvents() 解决了问题。