CODEWITHSUNDEEP
javascriptsyntaxbackbone.jscoffeescript
mportiz08
mportiz08

Reputation: 10328

Method Call Syntax in CoffeeScript

I'm new to CoffeeScript, and I seem to be having trouble with the syntax for calling methods.

Here's the Card model:

class exports.Card extends Backbone.Model
  defaults:
    pip:   '4'
    suit:  '♠'
    color: 'b'

  rows: ->
    rows =
      '4': [2, 0, 2]
    rows[@pip]

And the relevant portion of the template:

<ul class="col cols-<%= @card.rows()[0] %>">

which is giving me the error Uncaught TypeError: Object #<Object> has no method 'rows'

Specifically, I'm wondering if I'm using incorrect syntax for the rows method of Card or if I'm just misunderstanding something. Thanks in advance!

Update:

For some reason, @card.property always works fine, but @card.any_method() never does. I've gotten around this at the moment by using properties, but I'd love it if someone was able to explain this behavior. Thanks again!

Update 2:

I'm using http://brunchwithcoffee.com if it's a help to anyone, and here's the main.coffee file to show how the @card instance is being created and passed to the view.

window.app = {}
app.routers = {}
app.models = {}
app.collections = {}
app.views = {}

Card = require('models/card_model').Card
MainRouter = require('routers/main_router').MainRouter
HomeView = require('views/home_view').HomeView
CardView = require('views/card_view').CardView

# app bootstrapping on document ready
$(document).ready ->
  app.initialize = ->
    app.routers.main = new MainRouter()
    app.views.home = new HomeView()
    app.views.card = new CardView(model: new Card(color: 'r', suit: '♥', pip: '7'))
    app.routers.main.navigate 'home', true if Backbone.history.getFragment() is ''
  app.initialize()
  Backbone.history.start()

Upvotes: 6

Views: 13338

Answers (3)

mportiz08
mportiz08

Reputation: 10328

Finally figured it out--I forgot that the @card variable referenced in the template didn't originate from the main.coffee file--it was actually being converted into JSON in the CardView here:

cardTemplate = require('templates/card')

class exports.CardView extends Backbone.View
  tagName:   'div'
  className: 'card'

  render: ->
    $(@el).html cardTemplate(card: @model.toJSON())
    @

Now it makes sense why only variables were working and not methods -- @card was actually a JSON representation of the model instance.

Thanks for all the suggestions/clarifications guys--sorry for the dumb mistake :P

Upvotes: 0

Trevor Burnham
Trevor Burnham

Reputation: 77416

The problem is that pip isn't a property of the Card instance; it's a property of Card::defaults, so Backbone then makes it an attribute of the Card instance—not a property. You can access the pip attribute with

card.get 'pip'

or directly as

card.attributes.pip

The reason for this distinction is that, in JavaScript, there's no way to monitor a property for changes, which Backbone needs to do in order to dispatch events. (If you modify pip with card.set 'pip', then Backbone fires a "change" event, for instance.)

So, your code should work fine if you just change the last line of the rows method:

rows: ->
  rows =
    '4': [2, 0, 2]
  rows[@get 'pip']

(Note: Getters/setters are supported in some JS environments, which would allow you to map card.pip = ... to card.set 'pip', ... See John Resig's article on it here. Backbone doesn't use this approach because it aims to be compatible with all modern-ish browsers.)

Upvotes: 1

liammclennan
liammclennan

Reputation: 5368

Your method calling syntax is correct. The relevant rules for CoffeeScript are:

  • Parenthesis are optional for method calls invoked with arguments ie 

    object.method 1,2

    or

    object.method(1,2)

  • Parenthesis are required for method calls invoked with no arguments ie

    object.method()

To see how this works try running the following code on the 'Try CoffeeScript' editor on the CoffeeScript site:

class A
  method: ->
    console.log "A"

(new A()).method();

Since your method call syntax is correct it seems likely that the problem is that the @card variable is not an instance of the exports.Card class.

Upvotes: 14

Related Questions