命名空间 Backbone.js 视图未触发事件答案

【问题标题】：Namespaced Backbone.js Views not firing events命名空间 Backbone.js 视图未触发事件
【发布时间】：2011-11-13 15:39:08
【问题描述】：

我目前正在开始使用 Backbone.js。我用 Backbone 写了一些例子，它们运行良好。但现在我需要将 Backbone.js 与 Rails 3.1 和 CoffeeScript 一起使用。我拿了我运行良好的示例，并使用主干导轨 gem 重写了 CoffeeScript。

并遇到以下问题。我已经简化了代码，但问题仍然存在

我有以下文件：

根据我在 rails 应用程序中的 main_controller，我在 main.js.coffee 文件中启动我的 Backbone 应用程序：

$ = jQuery
$->
  CsfTaskManager.init()

这里是主干应用描述：

#= require_self
#= require_tree ./templates
#= require_tree ./models
#= require_tree ./views
#= require_tree ./routers

window.CsfTaskManager =
  Models: {}
  Collections: {}
  Routers: {}
  Views: {}
  init: ->
    new CsfTaskManager.Routers.AppRouter()
    Backbone.history.start()

这是我的应用程序的路由器：

class CsfTaskManager.Routers.AppRouter extends Backbone.Router
  initialize: (options) ->
    goalsBlock = new CsfTaskManager.Views.goalsView()

  routes:
    "!/": "root",
    some other routes...

最后查看：

class CsfTaskManager.Views.goalsView extends Backbone.View

  initialize: ->
    this.goals = new CsfTaskManager.Collections.GoalsCollection()

  el: $('div#app'),

  events:
    "click .add-btn": "addGoal"

  addGoal: ->
    alert('ji')

HTML页面有这样的代码：

<div id="app">
    <div class="app-screen hidden" id="goal-form" style="display: block; ">
      <button class="btn" id="load">
        Load
      </button>
      <h3>
        New Goal
      </h3>
      <div class="form-stacked">
        <form accept-charset="UTF-8" action="/goals" class="new_goal" id="new_goal" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="Pnt+V/tS1/b079M/1ZIRdw2ss1D6bvJKVh868DXRjUg="></div>
          <label for="goal_title">Title</label>
          <p></p>
          <input class="goal-title" id="goal_title" name="goal[title]" size="30" type="text">
          <p></p>
          <label for="goal_note">Note</label>
          <p></p>
          <input class="goal-note" id="goal_note" name="goal[note]" size="30" type="text">
        </form>
      </div>
      <p>
        <button class="add-btn btn">
          Add
        </button>
      </p>
      <ul id="goals-list"></ul>
    </div>
    <table class="app-screen bordered-table" id="calendar-grid" style="display: none; ">
      <tbody><tr>
        <td colspan="2">
          week
        </td>
      </tr>
      <tr>
        <td>
          day
        </td>
        <td>
          <div id="calendar"></div>
        </td>
      </tr>
    </tbody></table>
    <div class="app-screen hidden" id="role-form" style="display: none; ">
      <h3>
        New User Role
      </h3>
      <div class="form-stacked">
        <form accept-charset="UTF-8" action="/roles" class="new_role" id="new_role" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="Pnt+V/tS1/b079M/1ZIRdw2ss1D6bvJKVh868DXRjUg="></div>
          <label for="role_title">Title</label>
          <p></p>
          <input class="role-title" id="role_name" name="role[name]" size="30" type="text">
          <p></p>
          <label for="role_note">Note</label>
          <p></p>
          <input class="role-note" id="role_description" name="role[description]" size="30" type="text">
        </form>
      </div>
      <p>
        <button class="add-btn btn">
          Add
        </button>
      </p>
    </div>
  </div>

所以 .add-btn 元素嵌套在#app 中，但单击此按钮不会触发事件。哪里有问题？

以前，当我在一个 .js 文件中拥有相同的应用程序时，没有咖啡脚本、命名空间和骨干轨 gem，一切都很好。

顺便说一句，appRouter 工作正常，goalsView 对象也创建成功，但由于某些原因事件没有触发。

请给我一些提示，因为我真的被卡住了......

【问题讨论】：

标签： javascript ruby-on-rails-3.1 backbone.js coffeescript

【解决方案1】：

我认为问题可能出在CsfTaskManager 中的以下行：

  el: $('div#app'),

通常 el 应该是 jQuery 选择器字符串或 DOM 元素。在这里，您传递了一个 jQuery 对象。尝试将其更改为：

 el: 'div#app'

（CoffeeScript 中也不需要逗号）。

【讨论】：