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

updates more get instances and language in object model #124

Merged
merged 1 commit into from
Jul 31, 2018
Merged
Show file tree
Hide file tree
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
33 changes: 25 additions & 8 deletions guides/v3.3.0/object-model/classes-and-instances.md
Original file line number Diff line number Diff line change
Expand Up @@ -226,11 +226,27 @@ 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`.

[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
[Ember proxy objects][9] are the one big exception to this rule. 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.

Let's look at the following `blogPost` Ember Data model:

```javascript {data-filename=app/models/blog-post.js}
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { hasMany } from 'ember-data/relationships';

export default Model.extend({
title: attr('string'),
body: attr('string'),
comments: hasMany('comment', { async: true }),
});
```

To access the blog post's title you can simply write `blogPost.title`, whereas only the syntax `blogPost.get('comments')` will return the post's comments.

Always use Ember's [`set()`][8] method to update property values. 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.

```javascript
import EmberObject from '@ember/object';
Expand All @@ -241,10 +257,11 @@ 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.
[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
18 changes: 9 additions & 9 deletions guides/v3.3.0/object-model/computed-properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,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.
Expand All @@ -41,7 +41,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 being accessed, 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.
Expand All @@ -59,7 +59,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

Expand All @@ -68,11 +68,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
```


Expand Down Expand Up @@ -151,7 +151,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.
Expand Down Expand Up @@ -187,8 +187,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
Expand Down