Question

I’m currently getting started with Backbone.js. I’ve wrote some examples with Backbone and they are working fine.
But now I need to use Backbone.js with Rails 3.1 and CoffeeScript.
I took my well-working examples and rewrote on CoffeeScript using backbone-rails gem.

And got the following problem.
I’ve simplyfied code, but the problem is still remaining

I’ve got the following files:

Here I’m starting my Backbone app at main.js.coffee file according to my main_controller in rails app:

$ = jQuery
$->
  CsfTaskManager.init()

Here is backbone app description:

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

This is my apps’ router:

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

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

And finally view:

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 page has such code:

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

So .add-btn element is nested in #app, but click on this button doesn’t fire event.
Where can be a trouble?

Before, when I had the same app in one .js file, without of coffeescript, namespacing and backbone-rails gem, everything was allright.

Bytheway, appRouter works fine, goalsView object is created successfully too, but events don’t fire for some reasons.

Please give me some hint, because I’m really got stuck…

Answer 1

I think the problem could be the following line in CsfTaskManager:

  el: $('div#app'),

Normally el should be either a jQuery selector string or a DOM element. Here you are passing a jQuery object. Try changing it to:

 el: 'div#app'

(the comma is also not required in CoffeeScript).