From cfb8ef1a19700fbfd3b5c2d3e832036c8f5f6197 Mon Sep 17 00:00:00 2001 From: Gagan Bhullar Date: Mon, 2 Sep 2024 22:30:23 -0600 Subject: [PATCH] Avoid Ember array extension methods (#35673) * ember prototype fix * update text * review comments * Update index.md * Update files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md * Update files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md * Update files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md * Update files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md --------- Co-authored-by: Joshua Chen --- .../ember_conditional_footer/index.md | 4 ++-- .../ember_interactivity_events_state/index.md | 8 ++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md index 34c1497e837b1a8..3aa14609fd7dabf 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer/index.md @@ -73,11 +73,11 @@ To get the footer working, we need to implement the following three areas of fun ```js get incomplete() { - return this.todos.filterBy('isCompleted', false); + return this.todos.filter((todo) => !todo.isCompleted); } ``` - Using Ember's [`ArrayProxy.filterBy()`](https://api.emberjs.com/ember/4.2/classes/ArrayProxy/methods/filterBy?anchor=filterBy) method, we're able to easily filter Objects in our array based on simple equals conditions. Here we're asking for all the todo items where the `isCompleted` property is equal to `false`, and because `isCompleted` is `@tracked` in our `Todo` object, this getter will re-compute when the value changes on an Object in the array. + Using the [`filter()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) method, we're asking for all the todo items where the `isCompleted` property is equal to `false`, and because `isCompleted` is `@tracked` in our `Todo` object, this getter will re-compute when the value changes on an Object in the array. 4. Next, add the following action underneath the existing `add(text)` action: diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md index 8e2b039f57937e5..1dac18742ab95f8 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state/index.md @@ -186,18 +186,14 @@ export default class TodoDataService extends Service { add(text) { let newTodo = new Todo(text); - this.todos.pushObject(newTodo); + this.todos = [...this.todos, newTodo]; } } ``` Here, the `todos` property on the service will maintain our list of todos contained inside an array, and we'll mark it with `@tracked`, because when the value of `todos` is updated we want the UI to update as well. -And just like before, the `add()` function that will be called from the template gets annotated with the `@action` decorator to bind it to the class instance. -While this may look like familiar JavaScript, you may notice that we're calling the method [`pushObject()`](https://api.emberjs.com/ember/4.2/classes/ArrayProxy/methods/filterBy?anchor=pushObject) on our `todos` array. -This is because Ember extends JavaScript's Array prototype by default, giving us convenient methods to ensure Ember's tracking system knows about these changes. -There are dozens of these methods, including `pushObjects()`, `insertAt()`, or `popObject()`, which can be used with any type (not just Objects). -Ember's [ArrayProxy](https://api.emberjs.com/ember/4.2/classes/ArrayProxy) also gives us more handy methods, like `isAny()`, `findBy()`, and `filterBy()` to make life easier. +And just like before, the `add()` function that will be called from the template gets annotated with the `@action` decorator to bind it to the class instance. We [spread our `todos` array](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to add `newTodo` to it, which creates a new array and will trigger the reactivity system to update the UI. ## Using the service from our header component