How can I make Text dynamic in dxlist

Question

I am using devextreme dxlist with ajax. I want to use dxlist text dynamically. So text should not be fixed constantly. I can make dynamic using the variable text with ajax, but how to use the js variable in html. I have codes below. How can I make Text dynamic?

Html code

 <div  data-bind="dxList: { dataSource: dataSource,pullRefreshEnabled:true}">
 <div  data-options="dxTemplate : { name: 'item' } ">
 <div  data-bind="**text: UserName"**></div></div></div>//This text is dynamic         

Answer 1

As far as I understand, you need to wrap each dataSource item with ko.observable();. You can use the dataSource.map option to do this:

dataSource: {
    store: [/* your data */],
    map: function(item, index) {
        return {
            name: ko.observable(item.name),
            age: ko.observable(item.age)
        };
    }
}

Next, you can use these observable values as textbox values:

<div data-options="dxTemplate : { name: 'name-template' } ">
    <div data-bind="dxTextBox: { value: name }"></div>
</div>

In this sample I use two arrays(names and ages) to store the data that is connected with the list.

Also I use two templates 'name-template' and 'age-template' to show the particular data field in the list.

Hope this information helps you.