Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DOC release] Add example and clear up wording for CP get/set #12619

Merged
merged 1 commit into from
Nov 16, 2015
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 45 additions & 16 deletions packages/ember-metal/lib/computed.js
Original file line number Diff line number Diff line change
Expand Up @@ -537,22 +537,20 @@ ComputedPropertyPrototype.teardown = function(obj, keyName) {
computed property function. You can use this helper to define properties
with mixins or via `Ember.defineProperty()`.

If you pass function as argument - it will be used as getter.
You can pass hash with two functions - instead of single function - as argument to provide both getter and setter.

The `get` function should accept two parameters, `key` and `value`. If `value` is not
undefined you should set the `value` first. In either case return the
current value of the property.

A computed property defined in this way might look like this:
If you pass a function as an argument, it will be used as a getter. A computed
property defined in this way might look like this:

```js
let Person = Ember.Object.extend({
firstName: 'Betty',
lastName: 'Jones',
init() {
this._super(...arguments);

this.firstName = 'Betty';
this.lastName = 'Jones';
},

fullName: Ember.computed('firstName', 'lastName', function() {
return this.get('firstName') + ' ' + this.get('lastName');
return `${this.get('firstName')} ${this.get('lastName')}`;
})
});

Expand All @@ -564,14 +562,45 @@ ComputedPropertyPrototype.teardown = function(obj, keyName) {
client.get('fullName'); // 'Betty Fuller'
```

You can pass a hash with two functions, `get` and `set`, as an
argument to provide both a getter and setter:

```js
let Person = Ember.Object.extend({
init() {
this._super(...arguments);

this.firstName = 'Betty';
this.lastName = 'Jones';
},

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

let client = Person.create();
client.get('firstName'); // 'Betty'

client.set('fullName', 'Carroll Fuller');
client.get('firstName'); // 'Carroll'
```

The `set` function should accept two parameters, `key` and `value`. The value
returned from `set` will be the new value of the property.

_Note: This is the preferred way to define computed properties when writing third-party
libraries that depend on or use Ember, since there is no guarantee that the user
will have prototype extensions enabled._
will have [prototype Extensions](http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/) enabled._

You might use this method if you disabled
[Prototype Extensions](http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/).
The alternative syntax might look like this
(if prototype extensions are enabled, which is the default behavior):
The alternative syntax, with prototype extensions, might look like:

```js
fullName() {
Expand Down