DevExtreme Vue - ArrayStore
If you want to extend the functionality of a JavaScript array, place it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.
jQuery
$(function() { $("#listContainer").dxList({ dataSource: new DevExpress.data.ArrayStore({ data: fruits, onLoaded: function() { // Event handling commands go here } }), itemTemplate: function(data, _, element) { element.append( $("<b>").text(data.fruit), $("<br />"), $("<p>").text(data.count).css("margin", 0) ) } }); });
Angular
import { DxListModule } from "devextreme-angular"; import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { fruits = [ /* ... */ ]; fruitStore = new ArrayStore({ data: this.fruits, onLoaded: function () { // Event handling commands go here } }); } @NgModule({ imports: [ // ... DxListModule ], // ... })
<dx-list [dataSource]="fruitStore"> <div *dxTemplate="let data of 'item'"> <b>{{data.fruit}}</b><br/> <p style="margin:0">{{data.count}}</p> </div> </dx-list>
Data kept in an ArrayStore can be processed in the DataSource. Its purpose is similar to that of the Query, but DataSource provides wider capabilities. For example, the DataSource can map objects from the array that underlies the ArrayStore, as shown in the following code where the resulting objects match the default item template.
jQuery
var fruits = [ { fruit: "Apples", count: 10 }, // ... ]; $(function() { $("#listContainer").dxList({ dataSource: new DevExpress.data.DataSource({ store: fruits, map: function(item) { return { text: item.fruit, badge: item.count } } }) }); });
Angular
import { DxListModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { fruits = [ { fruit: "Apples", count: 10 }, // ... ]; fruitDataSource = new DataSource({ store: this.fruits, map: function (item) { return { text: item.fruit, badge: item.count } } }); } @NgModule({ imports: [ // ... DxListModule ], // ... })
<dx-list [dataSource]="fruitDataSource"> </dx-list>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.