名前空間Backbone.jsイベントが発生しないビュー

Question

私は現在、Backbone.jsを使い始めています。私はBackboneでいくつかの例を書いており、うまく動作しています。 しかし、私はBackbone.jsをRails 3.1とCoffeeScriptで使う必要があります。 私はうまく動作している例をとり、バックボーンレールの宝石を使ってCoffeeScriptに書き直しました。

そして、次の問題があります。 私は、コードをsimplyfiedましたが、問題はまだ私は、次のファイルを持っている

が残っている。ここで

私はレールに私のmain_controllerに従ってmain.js.coffeeファイルで私のバックボーンアプリを始めていますアプリ：

$ = 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... 

そして最後に表示：だから.add-BTN要素が#appにネストされ

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

が、このボタンをクリックしない：

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ページには、このようなコードを持っています火災事件。 どこに問題がありますか？

前に、1つの.jsファイルに同じアプリケーションがあり、coffeescript、namespacing、およびbackbone-rails gemなしですべてが正しかった。

bythewayでは、appRouterは正常に動作しますが、goalsViewオブジェクトも正常に作成されますが、何らかの理由でイベントが発生しません。

私は本当に私は問題はCsfTaskManagerに次の行かもしれないと思う...

Answer 1

を捕まってしまってるので、私にいくつかのヒントを教えてください：

通常ELはjQueryのどちらかでなければなりません

el: $('div#app'), 

をセレクタ文字列またはDOM要素。ここでは、jQueryオブジェクトを渡しています。

el: 'div#app' 

（カンマはCoffeeScriptでは必須ではありません）。