Ember.computed (v2.0.0): get(key), set(key, value)

Question

In Ember v2.0.0 Guide, chapter "THE OBJECT MODEL", section "Computed Properties":

Person = Ember.Object.extend({
  firstName: null,
  lastName: null,

  fullName: Ember.computed('firstName', 'lastName', {
    get(key) {
      return this.get('firstName') + ' ' + this.get('lastName');
    },
    set(key, value) {
      var [ firstName, lastName ] = value.split(/\s+/);
      this.set('firstName', firstName);
      this.set('lastName',  lastName);
    }
  })
});

Please help me understand the constructions "get(key)", "set(key, value)" and "var [ firstName, lastName ] = ...".

New ES6 and/or Ember functionality?

It's just a hash with two functions, a `get` and `set` function. `get(key)` is equivalent to `get: function(key)`. It's ES6 stuff. — Kingpin2k, Aug 24 '15 at 05:04
The split one is also part of ES6: http://www.ecma-international.org/ecma-262/6.0/#sec-destructuring-assignment http://stackoverflow.com/questions/3522406/javascript-split-string-straight-to-variables — Kingpin2k, Aug 24 '15 at 05:07
`get` and `set` are just functions. It doesn't have anything to do with ES6. — Felix Kling, Aug 24 '15 at 05:14
Except for the use of concise method syntax which is part of the ES6. — Kingpin2k, Aug 24 '15 at 06:01
Remember to `return value` in `set` if you want to use the `fullName` property, otherwise the prop won't be cached — Frank Treacy, Aug 26 '15 at 01:47

score 3 · Accepted Answer · answered Aug 24 '15 at 13:17

3

get(key), set(key, value) are just method signatures of new computed property syntax in Ember.js. So, if you write computed property in Ember.js you need to implement both of these methods and pass them as object to Ember.computed method, for example:

myComputedProperty: Ember.computed('propertyToDependOn', {

  get() { // <= function, equal to - get: function() {
    // ...
  },

  set(key, value) { <= function
    // ...
  }

})

var [ firstName, lastName ] = value.split(/\s+/); is example of destructuring assignment which matches a list. It's a part of ES2015 specification. You can read more about ES2015 on Babel website. Babel is JavaScript framework which is used in Ember CLI to give developers ability to work with new JavaScript syntax and features.

answered Aug 24 '15 at 13:17

Daniel Kmak

18,164
7
66
89

I am new to JS, to Ember.js and particularly to Babel/ES6. Therefore, thank you very much for your answer Daniel. I now realize that a new discrete getter and setter syntax for computed properties was introduced in Ember version 1.12. I am surprised by not finding anything about getter and setter for Ember.computed in the Ember API? Or perhaps I am wrong? I was also confused by some text in version 2.0.0 GUIDES AND TUTORIALS: “… so if you want to use a computed property as a setter, you'll need to check the number of arguments to determine whether it is being called as a getter or a setter” – Freddy Knoll Aug 24 '15 at 14:38
Well, http://emberjs.com/api/classes/Ember.computed.html is surely outdated, but here - http://guides.emberjs.com/v2.0.0/object-model/computed-properties/#toc_setting-computed-properties - you can find this methods mentioned. This text you mentioned - "… so if you want to use a computed property as a setter, you'll need to check the number of arguments to determine whether it is being called as a getter or a setter" - I think it's relic of the past. There's no longer need to do that. Before new computed property syntax it was needed to check number of arguments, but now it's not necessary. – Daniel Kmak Aug 24 '15 at 15:09

Ember.computed (v2.0.0): get(key), set(key, value)

1 Answers1