ObservableCollection and INotifyPropertyChanged in JavaScript Metro apps

Question

Guys, I'm going to implement some common scenarios of data binding. In traditional XAML apps, I can create an ObservableCollection and bind it to a list control, and the every element in the collection implements the INotifyPropertyChanged interface, which has the ability to notify the updates of the property. But in JavaScript metro apps how should I implement that? I know there's a WinJS.Binding.List class and it can be used as a ObservableCollection, but how can I create an object which could tell the control it's updated?

Thanks

---

Happy programming, happy life.
http://blog.zhaojie.me/

Answer 1

Hi Jeffrey,

You could refer to this sample: http://code.msdn.microsoft.com/windowsapps/ListView-custom-data-4dcfb128 Binding.LIstAPI and ListDataSourceAPI scenarios.

For WinJS.Binding.List, you could set it as the itemDataSource of one ListView control. Then push or setAt (other methods of List: http://msdn.microsoft.com/en-us/library/windows/apps/hh700774.aspx) the data into the list can notify the control to update the view.

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 2

Thanks, but I also want to know is there anything like INotifyPropertyChanged in JavaScript metro apps. As in traditional XAML app, when INotifyPropertyChanged.PropertyChanged event fired, the new value of the specified property would be updated in the UI.

---

Happy programming, happy life.
http://blog.zhaojie.me/

Answer 3

Jeffrey - have you seen Reactive Extensions?  http://msdn.microsoft.com/en-us/data/gg577609
I personally haven't used them but it looks like what you want.  Check them out and let us know if you have any specific questions I can research.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator

Answer 4

Matt,

I use Rx extensively in my daily work but it's not related to the problem here. I want to know how the UI control track the change of the collection and the object. Now I know the WinJS.Binding.List has events to notify the changed (as in ObservableCollection), but I still don't know how the UI tracks the property update (as using INotifyPropertyChanged interface in traditional XAML apps).

Thanks.

---

Happy programming, happy life.
http://blog.zhaojie.me/

Answer 5

Unless somebody in the community knows, I think you're on your own here.   XAML has awesome databinding built in, you'll have to roll your own ideas into a Javascript solution.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator

Answer 6

OK, "not supported" is also an acceptable answer for me, so I'll try to make my own workaround...

Thanks, guys.

---

Happy programming, happy life.
http://blog.zhaojie.me/

Answer 7

The ListView samples show how this works for JavaScript based apps.  You will see items moved added and removed and the ListView is updated:
http://code.msdn.microsoft.com/windowsapps/site/search?query=HTML%20Listview&f%5B0%5D.Value=HTML%20Listview&f%5B0%5D.Type=SearchText&ac=8

The Data Sources and Essential samples are probably what you want to look at the hardest.

-Jeff

---

Jeff Sanders (MSFT)

Answer 8

Hi Jeffrey,

Data binding in JS is interesting because we don't have proxies yet (maybe for ES6!) for listening to direct property updates on objects. As such the best you can do is create your own observable wrapper, which can be done pretty easily with ES5 getter/setter properties. WinJS can do this for you with WinJS.Binding.as: http://msdn.microsoft.com/en-us/library/windows/apps/br229801.aspx

There are some code samples in the gallery that show how to use data binding declaratively: http://code.msdn.microsoft.com/windowsapps/DeclarativeBinding-bfcb42a5 and imperatively: http://code.msdn.microsoft.com/windowsapps/ProgrammaticBinding-de038b64

Another valid approach is to abandon having data be direct properties on the objects themselves and instead manage it separately through explicit getter/setter calls. This is the pattern that Backbone.JS uses for its Models: http://documentcloud.github.com/backbone/#Model

There are, of course, other data binding frameworks out there. Knockout.JS is another public framework that uses a declarative MVVM model: http://knockoutjs.com/

Anyway, whether you use an external framework or WinJS, I hope you find a solution to your problem. I'd be curious to know which one you end up going with and what you find appealing about it.

Cheers,

-Jeff

Answer 9

Thanks a lot, Jeff!!!

---

Happy programming, happy life.
http://blog.zhaojie.me/

Answer 10

check out out this project:

https://mvvmjs.codeplex.com

documentation:

Automatic property change notifications in WWA applications (Part I): http://fknet.wordpress.com/2012/05/07/observables-in-winjs/

WinJS Observables in Examples (Part II): http://fknet.wordpress.com/2012/05/27/winjs-observables-in-examples/