Putting Coffeescript Underscore.js and Backbone.js Together

Question

TL; DR; http://jsfiddle.net/squarism/zaVrE/

I am new to Backbone.js and Underscore.js (Underscore, I believe, is included in Backbone). I use this in a rails application, but this bit doesn't matter / doesn't matter. I follow two episodes of Railscast on the spine. I try to emphasize underlining, spine, coffee houses, debugging and all documentation. Adding to the confusion is the difference between the Underscore API and the coffeescript version.

For example: I have an array of user objects as "records". Each of them has a winner attribute. So this will work:

# why does this return everyone? non_winners = @select(entries) -> @get('winner') == false 

So much is going on here. The value @select is an underscore. @get - from the trunk. And all this is coffeescript. Translating this to the JS debugging line is a little crazy. In the end, although I figured out javascript outside of the trunk to test this. My problem is with the docs:

The docs say:

 filter_.filter(list, iterator, [context]) Alias: select 

I do not know how to read it. I just called @select, which I thought was equivalent to .select (), but I did not give it an iterator. In Javascript on the browser console, it only returns an array with objects where the winner is wrong. In my application, if I console.log (non_winners), it returns everything to me, but console.log (non_winners.length) matches what I expect (i.e.: if I have one winner, this is 1). This mismatch really confuses when I study.

 entries = [ { name: 'Joe', winner: false }, { name: 'Bob', winner: false }, { name: 'Henry', winner: true } ] # here an example from my app #non_winners = @select (entries) -> # @get('winner') == false # here an example from the API #evens = _.filter [1..6], (num) -> num % 2 is 0 # here something that works non_winners = _.select entries, (entry) -> entry.winner is true 

I find a few misunderstandings:

• How people really debug this crazy combination. Coffeescript, Underline, Trunk, oh my! Until I understand everything, I would like to play with him. JSfiddle (below) is good, but is there any hope of using a browser console?
• How do you translate this business @select () (@ is your own coffeescript alias that points to the Backbone collection?) To emphasize _.select () api docs? The order of the arguments is different.
• In the above example (and in the script below), only one person is returned. But in my application all people come back.
• I can make one person return to the script, but the syntax is different from the examples in railscast (# 323).
• Code that works on the violin still does not match underscore docs. I would like to learn how to read underscore documents (learn to fish and one fish, etc.).

You can see this in action: http://jsfiddle.net/squarism/zaVrE/

Answer 1

It’s not entirely clear which scripts your problem lies in your actual code. I think the main problem here is @get('winner') , which is equivalent to this.get('winner') . You call the collection method instead of the input method. @ is just a replacement for this (or this. in case of functions). Your code should be

 non_winners = @select (entry) -> entry.get('winner') == false 

_ is just an object with a bunch of methods (including select ). The objects in the Backbone.js collection include Underscore methods.

As for debugging, in most cases it is trivial to display JS in the browser on your CoffeeScript code. Sometimes JS output is not what you expect due to indentation or missing parentheses. This is easy to debug - just look at the JS output.

Underscore.js and Backbone.js are just JS libraries, so you can check (or debug) their code. It is pretty clean and simple.