Aaron Renoir
Aaron Renoir

Reputation: 4381

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

Upvotes: 3

Views: 461

Answers (1)

Billy Moon
Billy Moon

Reputation: 58541

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');

Upvotes: 8

Related Questions