ember-autotracking-object-arrays
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision Next revision Both sides next revision | ||
|
ember-autotracking-object-arrays [2023/05/24 12:06] sausage created |
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 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 254: | 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 273: | 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 |}} | ||
| ===== Resources ===== | ===== Resources ===== | ||
| Line 281: | 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
