Get started with Backbone and CoffeeScript

Question

I think this is more of a CoffeeScript question. I want to be able to use classes from Backbone in a foo.coffee file. I tried using the -r option to require Backbone when running the coffee command:

coffee -r "../backbone" -c foo.coffee

The compiler complained that Backbone was undefined. I'm sure that this must be pretty simple. It's easy to find examples of people using CoffeeScript and Backbone together. I also tried requiring the class at the top of the file like so:

Backbone.model = require('../../backbone').Model

class foo extends Backbone.model

I could write it to console.log in the initialize method. When I tried writing this to console.log, I just got an empty object {}.

Can anyone tell me how to get this going?

Solution 1

If you're using CoffeeScript and Backbone.js, I recommend checking out Brunch. It may just get you past your difficulties.

Solution 2

Could you provide more of your code? I wasn't able to replicate the issue you had with initialize. Here's my code, with backbone.js in the same directory as the coffee file:

Backbone = require './backbone'

class foo extends Backbone.Model
  initialize: ->
    console.log this

new foo

On new foo, initialize is called and the output is

{ attributes: {},
  _escapedAttributes: {},
  cid: 'c0',
  _previousAttributes: {} }

As to the issue with -r, there are two reasons it doesn't work: First, -r performs

require '../backbone'

without assigning it to anything. Since Backbone doesn't create globals (only exports), the module has to be assigned when it's required.

Second, using -r in conjunction with -c doesn't add the required library to the compiled output. Instead, it requires it during compilation. Really, -r only exists so that you can extend the compiler itself—for instance, adding a preprocessor or postprocessor to the compilation pipeline—as documented on the wiki.

Comments

[Paul]

Thanks for the help. All I was trying to do was do the Backbone todos tutorial in Coffeescript. I cloned the backbone repo, and then created my own directory under examples for coffee. Long story short, I moved backbone and underscore into the same directory and the "foo" example above worked. I was also able to get to "hello world" for the tut. I just commented out the require statement and the backbone variable declaration in the generated code. Then, I loaded up index.html with expected console output. Is there an easier workflow when my html loads libs that coffee needs to compile?

[Trevor Burnham]

You mean like this? stackoverflow.com/questions/5170473/… :) (See my answer to that question for more alternatives for compiling for the browser. coffee is versatile, but it's definitely not the right tool for every job.)

[Paul]

Ok. Fair enough. At the moment, I'm trying to require the 'backbone-localstorage' file that is part of Todos. It expects underscore to be loaded. Without trying to define and compile Todos in the browser ... how do I manage these kind of dependencies so that I can compile? I tried requiring underscore and assigning it to _ in my Todos.coffee. I still got "_ is not defined". Surely I'm missing something obvious???