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/09/20 04:38] 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 (POJOs), but setting up models and working with Ember Data's store is simply 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 changes. | The user might still want to bind this data to controls and have it perform dynamically when the data changes. | ||
| Line 15: | 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 157: | Line 157: | ||
| } | } | ||
| - | @action changeContent(){} | + | @action changeContent(){} |
| } | } | ||
| Line 195: | 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 208: | 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 257: | 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 276: | 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 |}} | ||
ember-autotracking-object-arrays.1695184736.txt.gz ยท Last modified: 2023/09/20 04:38 by sausage
Page Tools
