ember-autotracking-object-arrays
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
ember-autotracking-object-arrays [2023/05/24 12:25] sausage |
ember-autotracking-object-arrays [2023/09/20 04:53] (current) sausage |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Ember Auto-tracking Object Arrays - Deep Dive ====== | ====== Ember Auto-tracking Object Arrays - Deep Dive ====== | ||
| - | {{ :ember:ember-title-card.jpg?nolink&300|}}There will be many times when an Ember application needs to work with simple temporary data, but setting up models and working with Ember Data's store is not appropriate or overkill. | + | {{ :ember:ember-title-card.jpg?nolink&300|}}There will be many times when an Ember application needs to work with simple temporary data (POJOs), but setting up models and working with Ember Data's store might be overkill. |
| - | The user might still want to bind this data to controls and have it perform dynamically when the data in the array might change. | + | The user might still want to bind this data to controls and have it perform dynamically when the data changes. |
| + | |||
| + | Let's explore some easy options. | ||
| ===== Setting up a new project ===== | ===== Setting up a new project ===== | ||
| Line 13: | Line 15: | ||
| "start": "ember serve --port 4300", | "start": "ember serve --port 4300", | ||
| - | Here is some styling to make the demo more pleasant to look at. Edit: app\styles\app.css | + | Here is some styling to make the demo more pleasant to look at. Edit: ''app\styles\app.css'' |
| <code css> | <code css> | ||
| Line 155: | Line 157: | ||
| } | } | ||
| - | @action changeContent(){} | + | @action changeContent(){} |
| } | } | ||
| Line 193: | Line 195: | ||
| ==== Spread operator ==== | ==== Spread operator ==== | ||
| - | For the second way to deal with the problem, let's change try adding our new object to the array using the spread operator: | + | For the second way to deal with the problem, let's try adding our new object to the array using the spread operator: |
| <code javascript> | <code javascript> | ||
| Line 206: | Line 208: | ||
| This works too. The spread operator is only a deep copy of the first layer, [https://medium.com/@kevinlai76/the-spread-operator-deep-and-shallow-copies-d193ac9b58bf | not the nested data]. Which is not a deep copy at all in my book. But it is enough to trigger a change in Ember. But we'll come back to this point a little later. | This works too. The spread operator is only a deep copy of the first layer, [https://medium.com/@kevinlai76/the-spread-operator-deep-and-shallow-copies-d193ac9b58bf | not the nested data]. Which is not a deep copy at all in my book. But it is enough to trigger a change in Ember. But we'll come back to this point a little later. | ||
| - | |||
| - | (move this)However, Ember still does not see size changes to the array at all. | ||
| - | |||
| ==== Ember's pushObject ==== | ==== Ember's pushObject ==== | ||
| - | Let's move now to trying Ember's ''pushObject'' function which is attached to all javascript arrays: | + | Let's move to trying Ember's ''pushObject'' function which is attached to all javascript arrays: |
| <code javascript> | <code javascript> | ||
| Line 255: | Line 254: | ||
| </code> | </code> | ||
| - | Click the Change Content button, and it doesn't work. Any why not? To Ember, the array hasn't changed. It's not shorter or longer, it has no idea what has happened. Even though the values inside each object have been changed, the spread operator is not a deep copy and Ember's auto tracking won't see it. | + | Click the Change Content button. It doesn't work. Any why not? To Ember, the array hasn't changed. It's not shorter or longer, it has no idea what has happened. Even though the values inside each object have been changed, the spread operator is not a deep copy and Ember's auto tracking won't see it. |
| ===== Solve with stringify/parse ===== | ===== Solve with stringify/parse ===== | ||
| Line 274: | Line 273: | ||
| </code> | </code> | ||
| - | This is probably the fastest and easiest take-home fix for tracking object arrays in Ember. But there are other options too which are worth exploring. But maybe for another time. | + | This is probably the fastest and easiest take-home fix for tracking object arrays in Ember. There are other options worth exploring, but not as simple. Maybe for another time. |
| {{ :ember:boxes-02.png?nolink |}} | {{ :ember:boxes-02.png?nolink |}} | ||
| Line 283: | Line 282: | ||
| https://guides.emberjs.com/v4.4.0/in-depth-topics/autotracking-in-depth/ | https://guides.emberjs.com/v4.4.0/in-depth-topics/autotracking-in-depth/ | ||
| + | ===== Thank you ===== | ||
| + | Huge thanks to Julien P for nutting over the original problem with me which served as the basis for this article. | ||
ember-autotracking-object-arrays.1684931155.txt.gz · Last modified: 2023/05/24 12:25 by sausage
Page Tools
