property getters called before viewmodel constructor?

Oct 17, 2014 at 11:44 PM
Edited Oct 18, 2014 at 3:42 AM
I've been testing out your framework and I'm attempting to bind a WinJS.Binding.List from a viewmodel to the view. I've been trying to follow your pattern and I am hitting some stumbling blocks.

First, I can't create a setter for my WinJS.Binding.List because I can't use raisePropertyChanged with this type. That is not a problem because I don't expect to change the list itself. (and even in this case, I won't be changing the list contents.)

So I just have the getter portion set:
private _actionOptions: WinJS.Binding.List<Turnstile.Models.ActionOption>;

// Gets a value for the "actionOptions" property
        public get actionOptions(): WinJS.UI.IListDataSource<Turnstile.Models.ActionOption> { return this._actionOptions.dataSource; }
In the constructor, I am initializing and populating the private variable _actionOptions.
 this._actionOptions = new WinJS.Binding.List<Turnstile.Models.ActionOption>([], { binding: true });
            this._actionOptions.push(new Turnstile.Models.ActionOption("check-in"));
            this._actionOptions.push(new Turnstile.Models.ActionOption("add new member"));
            this._actionOptions.push(new Turnstile.Models.ActionOption("add new class"));
            this._actionOptions.push(new Turnstile.Models.ActionOption("edit packages"));
            this._actionOptions.push(new Turnstile.Models.ActionOption("edit class types"));
However, it seems that the getter is being called before the viewmodel constructor. I get an error because the _actionOption variable is undefined.

Do you have any suggestions? I seem to be doing something wrong. (I'm much better at C#... this is still new to me.)

Oct 18, 2014 at 5:12 PM
Hi Lee,
thanks for your message.

I've just pushed a new sample on the repository containing some sample data using a ListView bound to the ViewModel property.

Hope this helps,
Marked as answer by leemcpherson on 10/20/2014 at 7:29 PM
Oct 19, 2014 at 12:16 AM
Thanks, that helped. Part of the confusion is that you're using typings for WinJS that differ from the official project (which I believe they share with the DefinitelyTyped project). The binding property had to be a WinJS.UI.IListDataSource<any> since that is the new return value of the WinJS.Binding.List<T>.dataSource. Oh, and they are generics, too.

There was also a bug in my code somewhere else that I just figured out. (The model was referenced via the Typescript reference but not in the script tags on an html doc.)

Finally, I'm also using the Mult-device Hybrid App template from Microsoft. There are definitely some quirks to it as it is still preview. The list binding is working fine in the Android and iOS emulators. For some reason, the Win8 app won't load the list AND it won't let me debug anything loaded from the content page. (I have a root page that does all the navigation which I can set breakpoints, but the content pages I display with a PageControlNavigator show no errors and won't stop on breakpoints.)

Thanks for your help. I'll keep you updated as I think I will be using this to code my next app. I will just hope that updated versions of the hybrid app template make it work better on Win8 (and WP8).
Oct 19, 2014 at 12:49 AM
Ok, I just noticed you updated it quite a bit from before. There are separate files for the IoC and dialogservices. Going to have to incorporate it all before I swear off the win8 version of my app for a while. :)
Oct 19, 2014 at 9:12 AM
Hi Lee,
Glad it helped.

I'll update the typings from Definitely Typed and I've also plans to start some experiments using the Multi-Device Hybrid apps template to incorporate it inside the library.

Please keep me updated about your progress!