diff --git a/guides/v3.3.0/object-model/classes-and-instances.md b/guides/v3.3.0/object-model/classes-and-instances.md index aa6910112e..da5c40f6a2 100644 --- a/guides/v3.3.0/object-model/classes-and-instances.md +++ b/guides/v3.3.0/object-model/classes-and-instances.md @@ -226,11 +226,15 @@ Person.create({ ### Accessing Object Properties -When accessing the properties of an object, use the [`get()`][7] -and [`set()`][8] accessor methods: +When reading a property value of an object, you can in most cases use the common Javascript dot notation, e.g. `myObject.myProperty`. + +The one big exception to this rule are [Ember proxy objects][9]: if you're working with Ember proxy objects, including promise proxies for async relationships in Ember Data, you have to use Ember's [`get()`][7] accessor method to read values. + +For updating property values use Ember's [`set()`][8] method. It will propagate the value change to computed properties, observers, templates, etc. If you "just" use Javascript's dot notation to update a property value, computed properties won't recalculate, observers won't fire and templates won't update. [7]: https://www.emberjs.com/api/ember/release/classes/@ember%2Fobject/methods/get?anchor=get [8]: https://www.emberjs.com/api/ember/release/classes/@ember%2Fobject/methods/set?anchor=set +[9]: https://emberjs.com/api/ember/3.3/classes/ObjectProxy ```javascript import EmberObject from '@ember/object'; @@ -241,10 +245,7 @@ const Person = EmberObject.extend({ let person = Person.create(); -person.get('name'); // 'Robert Jackson' +person.name; // 'Robert Jackson' person.set('name', 'Tobias Fünke'); -person.get('name'); // 'Tobias Fünke' +person.name; // 'Tobias Fünke' ``` - -Make sure to use these accessor methods; otherwise, computed properties won't -recalculate, observers won't fire, and templates won't update. diff --git a/guides/v3.3.0/object-model/computed-properties.md b/guides/v3.3.0/object-model/computed-properties.md index 3f293208a2..08d00de54b 100644 --- a/guides/v3.3.0/object-model/computed-properties.md +++ b/guides/v3.3.0/object-model/computed-properties.md @@ -32,7 +32,7 @@ let ironMan = Person.create({ lastName: 'Stark' }); -ironMan.get('fullName'); // "Tony Stark" +ironMan.fullName; // "Tony Stark" ``` This declares `fullName` to be a computed property, with `firstName` and `lastName` as the properties it depends on. @@ -44,7 +44,7 @@ Changing any of the dependent properties causes the cache to invalidate, so that A computed property will only recompute its value when it is _consumed._ Properties are consumed in two ways: -1. By a `get`, for example `ironMan.get('fullName')` +1. By accessing, for example `ironMan.fullName` 2. By being referenced in a handlebars template that is currently being rendered, for example `{{ironMan.fullName}}` Outside of those two circumstances the code in the property will not run, even if one of the property's dependencies are changed. @@ -65,7 +65,7 @@ import Ember from 'ember': … ``` -Using the new property, it will only log after a `get`, and then only if either the `firstName` or `lastName` has been previously changed: +Using the new property, it will only log after a `fullName` is accessed, and then only if either the `firstName` or `lastName` has been previously changed: ```javascript @@ -74,11 +74,11 @@ let ironMan = Person.create({ lastName: 'Stark' }); -ironMan.get('fullName'); // 'compute fullName' +ironMan.fullName; // 'compute fullName' ironMan.set('firstName', 'Bruce') // no console output -ironMan.get('fullName'); // 'compute fullName' -ironMan.get('fullName'); // no console output since dependencies have not changed +ironMan.fullName; // 'compute fullName' +ironMan.fullName; // no console output since dependencies have not changed ``` @@ -157,7 +157,7 @@ Let's use computed properties to dynamically update. ```javascript captainAmerica.set('firstName', 'William'); -captainAmerica.get('description'); // "William Rogers; Age: 80; Country: USA" +captainAmerica.description; // "William Rogers; Age: 80; Country: USA" ``` So this change to `firstName` was observed by `fullName` computed property, which was itself observed by the `description` property. @@ -193,8 +193,8 @@ Person = EmberObject.extend({ let captainAmerica = Person.create(); captainAmerica.set('fullName', 'William Burnside'); -captainAmerica.get('firstName'); // William -captainAmerica.get('lastName'); // Burnside +captainAmerica.firstName; // William +captainAmerica.lastName; // Burnside ``` ### Computed property macros