diff --git a/docs/api/reorder.md b/docs/api/reorder.md index 4d7d32f87fc..b40605a7093 100644 --- a/docs/api/reorder.md +++ b/docs/api/reorder.md @@ -61,10 +61,14 @@ import Wrapper from '@site/static/usage/v7/reorder/wrapper/index.md'; ## Updating Data -When the `complete` method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync. In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the `complete` method. The `complete` method will sort the array and return it so it can be reassigned. +When the `complete` method is called on the reorder group with no parameters, the DOM nodes will be reordered. If the items are rendered from an array of data that needs to be sorted, this can result in the data and DOM being out of sync. + +In order to sort the array upon completion of the reorder, the array should be passed as a parameter to the `complete` method. The `complete` method will sort the array and return it so it can be reassigned. Note that passing the array will prevent Ionic from reordering the DOM nodes. In some cases, it may be necessary for an app to reorder both the array and the DOM nodes on its own. If this is required, `false` should be passed as a parameter to the `complete` method. This will prevent Ionic from reordering any DOM nodes inside of the reorder group. +Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue. + import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md'; diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_html.md b/static/usage/v7/reorder/updating-data/angular/example_component_html.md index d21fc522e96..2485a558246 100644 --- a/static/usage/v7/reorder/updating-data/angular/example_component_html.md +++ b/static/usage/v7/reorder/updating-data/angular/example_component_html.md @@ -3,7 +3,7 @@ - + Item {{ item }} diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md index 11e2f59d553..920f5f81e36 100644 --- a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md +++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md @@ -23,5 +23,9 @@ export class ExampleComponent { // After complete is called the items will be in the new order console.log('After complete', this.items); } + + trackItems(index: number, itemNumber: number) { + return itemNumber; + } } ``` diff --git a/static/usage/v7/reorder/updating-data/react.md b/static/usage/v7/reorder/updating-data/react.md index c7ad97d184d..acbf422d017 100644 --- a/static/usage/v7/reorder/updating-data/react.md +++ b/static/usage/v7/reorder/updating-data/react.md @@ -24,7 +24,7 @@ function Example() { {/* The reorder gesture is disabled by default, enable it to drag and drop items */} {items.map((item) => ( - + Item {item} diff --git a/static/usage/v7/reorder/updating-data/vue.md b/static/usage/v7/reorder/updating-data/vue.md index 18a2d341353..024caf38347 100644 --- a/static/usage/v7/reorder/updating-data/vue.md +++ b/static/usage/v7/reorder/updating-data/vue.md @@ -3,7 +3,7 @@ - + Item {{ item }}