Coffeescript and Ember

Design
1

Trying to get a deeper understanding of coffeescript syntax as it applies to ember.

Can someone explain the bottom line with parentheses in the coffeescript syntax?

Some code examples:

When it comes to simple calls to the extend method I have seen different forms of the coffeescript in the wild.

For example this

App.PostRoute = Ember.Route.extend({
  model: function() {
    return App.Post.find();
  }
});

I have seen translated into both of the following variants:

coffeescript:

App.PostRoute = Ember.Route.extend
  model: ->
    App.Post.find()

vs

coffeescript:

App.PostRoute = Ember.Route.extend(
  model: ->
    App.Post.find()
)

But when you want to get more complicated and add more labelled objects such as events to an ember object it seems that the parentheses are required.

javascript

App.PostRoute = Ember.Route.extend({

  events: {
    expand: function() {
      this.controller.set('isExpanded', true);
    },

    contract: function() {
      this.controller.set('isExpanded', false);
    }
  },
  
  model: function() {
    return App.Post.find();
  }

});

coffeescript:

App.PostRoute = Ember.Route.extend(
  events:
    expand: ->
      @controller.set "isExpanded", true

    contract: ->
      @controller.set "isExpanded", false

  model: ->
    App.Post.find()
)

Am I correct to understand that the following is not valid?

e.g. remove the wrapping parentheses.

coffeescript:

App.PostRoute = Ember.Route.extend
  events:
    expand: ->
      @controller.set "isExpanded", true

    contract: ->
      @controller.set "isExpanded", false

  model: ->
    App.Post.find()

Maybe the coffeescript with the dropped parentheses is analogous to the “Seattle Style” of ruby methods. But it seems like the safest thing is to always use the parentheses.

Thoughts? Opinions?

By the way I am all for general rubyist mindset of removing “noise” from the code, but my brain sometimes hurts manually jumping between these syntaxes (coffee, javascript, ruby, python, php, etc). Or rather spending all day in the land of unicorns sometimes makes it hard to come back down into to the bare knuckle grittty world of javascript parentheses and semi colons. :slight_smile:

2

I use coffeescript with Ember.js. The only time I use parenthesis is for computed properties/observers and for method arguments when using spaces would be confusing.

App.Profile = Ember.Model.extend App.MyMixin,

  fullName: ((key, value)->
    if arguments.length == 2 and value
      name = value.split(' ')
      @set 'firstName', name[0]
      @set 'lastName', name.slice(1).join(' ')

    if @get('firstName') or @get('lastName')
      $.trim "#{@get 'firstName'} #{@get 'lastName'}"
    else
      null
  ).property('firstName', 'lastName')

  isMale: (->
    if @get('gender') == 'Male' then true else false
  ).property('gender')

I haven’t wrapped my evented routes with parenthesis and I haven’t run into any issues yet. If there’s a reason that you should wrap in parenthesis I’d love to hear it!

3

OK, maybe I was confused in one of my earlier attempts to use a coffeescript in ember. Will look at it closer. Just wanted to make sure I wasn’t overlooking something.

4

You should check out http://emberscript.com/ and see if it fits your needs

5

I did early on but it was just another layer of abstraction that I wasn’t prepared to use yet. I found it more expedient just to fall back to javascript to follow along some of the code examples I was finding in the ember community.

The issue for me is that I need to understand Coffeescript better. And that is why I asked this question.

But Emberscript does look cool and I can see the utility.

I have also tried Emblem JS because I really do like Slim. Isn’t that your project? Very nice.

My challenge is that I ran into a few areas where I was having difficulty interpreting the errors, and I wasn’t sure if it was emblem or coffeescript issue or I was just doing something wrong in ember or maybe it was ember data issue. A lot of moving parts :slight_smile:

I think this is partly an issue with my own learning style, I need to see the code example in full context to learn. Another general issue was trying to use the rails asset pipeline and ember rails (but without using the generators) and so I am not always looking at the output source for effective debugging. I have started to play with JSBin more and I find that really useful to distill a problem down to its basic form.

It would be cool if there something equivalent to deal with emblem/slim emberscript/coffeescript but in a browser based self contained shareable snippets like JSBin.

Like http://js2coffee.org but where you could put running emberscript and emblem code and ember js and see it all run and share examples.

6

Maybe the answer is an emblem and emberscript build tool that compiles down to a gist or something that can be imported into JSBin or shared in a similar manner.

But it would still be awesome to work with Emberscript/Coffeescript live in an editor and switch back and forth between the coffee script and then edit on the JS side and see the change back to coffee and still see the whole JSBin type output ready to share.

7

Another way of saying this is that all these tools could/should take a cue from Bret Victor’s Inventing on Principle talk.

http://vimeo.com/36579366