简单视图的Coffeescript

Question

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

我错过了什么？

谢谢！

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>

简单视图的Coffeescript

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()

Answer 1

马吕斯说的是对的。

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

class AppView extends Backbone.View

  events:
    'click button': 'render'

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

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

Answer 2

我认为设置事件处理的delegateEvents会在调用View之前在initialize构造函数中调用，因此要么在initialize中明确地调用它方法（在设置events地图后），或确保events地图是作为构建View类本身的一部分而设置的，请参阅：

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

Backbone.js / Coffeescript - 映射简单点击事件

简单视图的Coffeescript

2 个答案: