Aaron Renoir Aaron Renoir - 5 months ago 19
Javascript Question

coffeescript 1.7 broke my ember.js computed properties

Given the following coffeescript.

App.Whatever = Em.ArrayController.extend
clean: Em.computed ->
@get('content').filterBy('clean', true)
.property 'content'


Coffeescript < 1.7 would correctly output:

App.Whatever = Em.ArrayController.extend({
clean: Ember.computed(function() {
return this.get('content').filterBy('clean', true);
}).property('content')
});


Now Coffeescript 1.7 outputs:

App.Whatever = Em.ArrayController.extend({
clean: Ember.computed(function() {
return this.get('content').filterBy('clean', true);
})
}).property('content');


This seems like a takeaway. Am I missing anything or do I have to rewrite all my computed properties?

Example

Answer

I think the way you were using coffeescript for chained properties was undocumented. I believe the official method for chaining is to use brackets to explicitly define where the property is attached...

App.Whatever = Em.ArrayController.extend
  clean: Em.computed( ->
    @get('content').filterBy('clean', true)
  ).property 'content'

Alternatively, if you really want to avoid brackets, you could write it like this

App.Whatever = Em.ArrayController.extend
  clean:
    Em.computed ->
      @get('content').filterBy('clean', true)
    .property 'content'

Both examples above compile to

App.Whatever = Em.ArrayController.extend({
  clean: Em.computed(function() {
    return this.get('content').filterBy('clean', true);
  }).property('content')
});

UPDATE: CoffeeScript 1.7 new feature...

From the docs... Leading . now closes all open calls, allowing for simpler chaining syntax.

$ 'body'
.click (e) ->
  $ '.box'
  .fadeIn 'fast'
  .addClass '.active'
.css 'background', 'white'

Will output...

$('body').click(function(e) {
  return $('.box').fadeIn('fast').addClass('.active');
}).css('background', 'white');