Rudimentary Way to Make a WinRT Component Object Bindable in WinJS

When projecting a WinRT Component object to WinJS, I kept running into an exception saying that the WinRT object could not be extended. This post will briefly describe how I got around this issue.

There are a few things known that helped come to this solution:

  • I didn’t need to worry about differences between one-way/two-way binding. All I had to do was present the object onto the screen.
  • Average JavaScript objects are bindable with WinJS
  • JavaScript objects are essentially associative arrays
  • If a member does not exist when referenced in an assignment operation, it is first created, then assigned.
  • I can essentially “clone” objects by iteratively copying members using array syntax.

This last item is exactly what I did! Let me elaborate:

It is simple. At this point, we can’t bind to WinRT Objects therefore we need to make them bindable ourselves. The code snippet below shows this.

function _makeBindable( obj ) {
    var o = new Object();
    for ( m in obj ) {
        o[m] = obj[m];
    }
    return o;
}

var winrtObj = Projection.getWinRTObject();

//cannot bind winrtObj

var bindableWinRTObj = _makeBindable( winrtObj );

//use bindableWinRTObj for data-binding scenarios

Lets look at _makeBindable in a little more detail.

First, the function takes an object as a parameter. This object is the WinRT object that is causing issues. Then, a local variable is created assigned to a new Object.

The next part is very important – iterating over the members of the WinRT object. Using a for-in loop, cloning an object is quite easy. In this case, “m” represents the current member name as a string. Since JavaScript objects are essentially associative arrays, “m” can be used to access the current WinRT object’s member using array syntax. The member name is also used to assign to the local variable that was previously created. This effectively copied the current member from the WinRT object to the local variable.

Once all of the members are copied, the local variable is returned for use in data-binding scenarios.

Advertisements

Introduction to HTML & JS Data Templates for Metro Apps

Windows Library for JavaScript (WinJS) provides convenient ways to format and display data. Here we focus on templates and a few ways of implementing them in a Metro app. Templates provide a way to present multiple instances of object data to the user with a high degree of control while maintaining ease of implementation. Templates can be used with ListViews, other controls provided for Metro app development, and can even be used without a predefined view.

In this article, three ways of using templates will be described, beginning with template basics. This section will provide an overview of templates and what roles HTML and WinJS play. The second section will describe item templates and how they can be used to display a list of items. Then, building off the second section, the third section will employ item templates with the ListView control. Finally, more advanced topics will be discussed, including nested templates and object-oriented CSS. A usable solution that contains a functional version of the code snippets provided is available at the end of the post. General data-binding experience is assumed.

Read more of my post here: http://magenic.com/Blog/IntroducingHTMLJSTemplatesforMetroApps.aspx and don’t forget Google+!