MvvmStack for WinJS Part#5
In this last post about MvvmStack I’m going to cover two aspects: Binding and Blendabilty.
Binding
I’m not going into WinJS Binding since MSDN documentation provides a lot of material, i just want to describe some binding extensions available into binding-extension.js file that extends WinJS binding capabilities.
Inside Binding.Extensions namespace you find:
twoWay: I’ve described it here
eventToProperty: Allows you to update a viewmodel property when a control event occurs, you can also specify a two-way mode so that when viewmodel’s property changes the control’s property is updated with new value. The demo uses it to notify the viewmodel that user flipped the image on flipview control (on section.html page) and to move to fist or last image on set using application bar’s buttons.
Here’s how is declared inside section.html page:
<div id="flip"
data-win-control="WinJS.UI.FlipView"
data-win-bind="winControl.itemDataSource:images.dataSource; winControl.onpagecompleted$currentPage.value:winControl.currentPage$two Binding.Extensions.eventToProperty"
data-win-options="{ itemTemplate : select('.flipItemTemplate') }">
</div>The syntax is [triggerEvent]$[viewModelProperty]:[controlProperty][$two], previous html snippet shows how, when FlipView’s onPageCompleted triggers, we update viewmodel’s currentpage.value property using control’s currentPage property in two way mode.
invokeOnEvent: Invokes a viewmodel’s method when an event occurs, passing event source as parameter to target function (sort of ‘sender’ parameter C# counterpart) if you don’t need sender, just use standard WinJS binding.
arrayBind: Allows binding to viewmodel’s properties exposed as arrays using this syntax: [sourceProp]:[property][index][property] e.g: data-win-bind=”src:dataTile[0].image”
Blendability
If you, like me, use Blend for HTML tool to design the views you know that it offers an interesting interactive mode.
By clicking following button:
your app is run, you can play with it, then exiting from interaction mode, start modifying the live DOM acting on current live state.
Sometimes running the app and reaching the page you want to edit is tedios, that’s why i prefer to use an alternative way.
Inside defaul.html you’ll see that there’s a commented PageControlNavigator definition, this is the one i use to start app from a specific page, let’s change default.html markup this way.
<body>
<!--<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home:'/pages/home/home.html'}"></div>--><!--Uncomment this when you want to design a specific application page, dont forget to create fake data inside ViewModelLocator-->
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home:'/pages/section/section.html'}"></div>
</body>Next we need to create some design-time data for editing purposes, so we uncomment the call to createDesignTimeViewModels line inside viewModelLocator.js//Uncomment this to create a fake design time viewmodel to use with the page associated with default.html's page navigator
viewModelLocator.createDesignTimeViewModels();what the function does is create some fake data when the page is loaded inside Blend.Opening default.html in Blend now shows the page populated with fake data so you can start editing it.
ClosingThink I’ve covered everything you need to know to play with sample code, as stated initially there’s room for improvements and modifications. My goal was to provide an example of how to use MVVM patter in WinJS based applications.Hope you enjoyed reading.
