ember-autotracking-object-arrays
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
ember-autotracking-object-arrays [2023/05/24 12:06] sausage created |
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 ====== | ||
| - | 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 54: | Line 56: | ||
| Create a new terminal in vscode or open a bash window and start the app with: ''npm start''. | Create a new terminal in vscode or open a bash window and start the app with: ''npm start''. | ||
| - | Once the default page is up, remove everything from app\templates\application.hbs to get rid of Hammy Hamster and his friends. | + | Once the default page is up, remove everything from ''app\templates\application.hbs'' to get rid of Hammy Hamster and his friends. |
| Let's make a box component that can display some information as well as an error state: | Let's make a box component that can display some information as well as an error state: | ||
| Line 94: | Line 96: | ||
| <code html> | <code html> | ||
| - | <Container @boxes={{@model}} /> | + | <Container @boxes={{@model}} /> |
| </code> | </code> | ||
| Line 117: | Line 119: | ||
| { | { | ||
| number: 11, | number: 11, | ||
| - | error: '11 is bad' | + | error: 'Error: Test' |
| } | } | ||
| ] | ] | ||
| Line 129: | Line 131: | ||
| Excellent, we have three Boxes on the page inside our container. This is our starting point. How can we dynamically change the data on the screen using a tracked array of objects? | Excellent, we have three Boxes on the page inside our container. This is our starting point. How can we dynamically change the data on the screen using a tracked array of objects? | ||
| - | [] | + | {{ :ember:boxes-01.png?nolink |}} |
| - | We can make a start by moving the data into a tracked property in the container component. The model data will be passed from the args to the tracked property. We'll also start adding some actions too. | + | We can make a start by moving the data into a tracked property in the container component. The model data will be passed from the args to the tracked property. We'll also start adding some actions, as well as a selection of error messages to use for the boxes. |
| <code javascript> | <code javascript> | ||
| Line 140: | Line 142: | ||
| export default class ContainerComponent extends Component { | export default class ContainerComponent extends Component { | ||
| @tracked boxes = []; | @tracked boxes = []; | ||
| + | errors = ['Invalid', 'Faulty', 'Disconnected', '']; | ||
| constructor(owner, args) { | constructor(owner, args) { | ||
| Line 154: | Line 157: | ||
| } | } | ||
| - | @action changeContent(){} | + | @action changeContent(){} |
| } | } | ||
| Line 192: | 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 205: | 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 254: | 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 273: | 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 |}} | ||
| ===== Resources ===== | ===== Resources ===== | ||
| Line 281: | 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.1684930006.txt.gz · Last modified: 2023/05/24 12:06 by sausage
Page Tools
