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 Next revision Both sides next revision | ||
|
ember-autotracking-object-arrays [2023/05/24 12:22] sausage |
ember-autotracking-object-arrays [2023/09/20 04:43] sausage |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Ember Auto-tracking Object Arrays - Deep Dive ====== | ====== Ember Auto-tracking Object Arrays - Deep Dive ====== | ||
| - | 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 is simply 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 255: | Line 257: | ||
| </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 276: | ||
| </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 285: | ||
| 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.txt · Last modified: 2023/09/20 04:53 by sausage
Page Tools
