Binding array to listview, one-way data binding,is it possible?

Question

I have an array and a listview ( created with winjs.binding.list ).  I have to edit the array with dynamic data. (I add the text which user enters in a textbox, to the array).

I want to be able to just change the array each time and want the listview to reflect it. But I have ended up changing the array as well as the listview data each time.

Is data binding possible between array and listview objects?

If yes, should I use binding.as or mention winjs.bindng.oneway in the template I am using or ...(tried some but no luck)

 If I don't do anything, does the default mean onetime data binding?

---

karthika

Answer 1

Hi,

You have to use WinJS.Binding.as objects bound to the listview. When you want to change , get the item from the binding list, set the new value, it should reflect on the list view.

I have done it and most certainly it does :

var list = new WinJS.Binding.List();

list.push(WinJS.Binding.as ( { Id : 1, Name : "ABC" } );
list.push(WinJS.Binding.as ( { Id : 2, Name : "DEF" } );
list.push(WinJS.Binding.as ( { Id : 3, Name : "GHI" } );
list.push(WinJS.Binding.as ( { Id : 4, Name : "JKL" } );

var listview = document.body.querySelector(".somelist").winControl;
listview.itemDatasource = list.datasource;

// When changing :
var item = list.getAt(2);
item.Name = "XYZ"; // This should reflect.

- Girija

Answer 2

Thanks so much. 

var arr = new Array();
var list = new WinJS.Binding.List(arr);
list.unshift(WinJS.Binding.as ( { Id : 1, Name : "ABC" } );
var listview = document.body.querySelector(".somelist").winControl;
listview.itemDatasource:...
listview.itemTemplate:...
var item = list.getAt(0);
item.Name = "XYZ";

If I do the above, will  "arr[0].Name" also change automatically?   

 The listview reflects in the Template UI where I do data-win-bind:"innerText = Name".  (Is this the binding that will happen or  is it possible to bind the template,listview and the underlying array as well).

WinJS default binding is one-way. Here does it mean, the list will get updated if the array object is observed(binding.as) or  array gets updated with bound listview item?

---

karthika

Answer 3

Yes it should change.. Are you not able to see the change ?

The listview can only be bound to a binding list data source.

To see update in values of bound objects you have to have that as WinJS.binding.as ( .....

- Girija

Answer 4

 Thanks so much. Just one thing,

 WinJS.binding.as, can be used only while adding array items, or, only when pushing into the list, to see the change in the other one?

Whne I move,delete,change any array item, should binding.as be called.

Also I might need to do WinJS.Binding.processAll( for the listview element) right.

---

karthika

Answer 5

You should use the binding as when you add the items to the Binding list. When you remove/change I do not think you need to call the binding.as again ..

WinJS.Binding.as create a bindable object that observes. changes to it and notifies the update.

If you want changes (to properties) in item to reflect in UI then you need to use WinJS.Binding.as (.....

If you operation is only to add/remove items and not changing the item properties, then the WinJS.Binding.List is good enough. Not necessary to have WinJS.Binding.as(  .... objects..

Hope this helps...

- Girija