Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Rudimentary Way to Make a WinRT Component Object Bindable in WinJS

, 15 Oct 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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 diff

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Caleb McElrath
Software Developer Magenic Technologies Inc
United States United States
Developer for Magenic Technologies Inc.
 
Caleb began his trek at the age of 16 starting with Turbo Pascal (wanting to expand his horizons from the basics of HTML). Realizing this was not nearly a modern industry standard programming language, he moved on to Visual C++. There he was met with many object-oriented and data structure problems and solutions. His horizons took on the world from there where he explored everything from Ruby, Python, PHP, Flash, to .NET, Java, and jQuery.
 
In Microsoft technologies is where Caleb finds most of his time spent. His days and long nights are filled with the .NET Framework and SQL Server.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 15 Oct 2013
Article Copyright 2013 by Caleb McElrath
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid