Binding WinJS to WinRT objects

Question

We are writing a Windows Store app. A lot of the data processing and aggregation is done in a WinRT component and the UI is written in WinJS/HTML. One of the main issues we are running into is the inability of WinJS to bind to WinRT objects. Specifically, the WinJS runtime throws an exception that it cannot extend the WinRT object. This is in a line of code that tries to define a new property on the data object. This works fine for WinJS objects as they are dynamic. Not so for WinRT. The only way I can bind is via oneTime bindings, because this doesn't try to create an Observable object out of the WinRT object. Is there some kind of interface the WinRT objects can implement to support one way or even two way binding?

Answer 1

No, this isn't possible without creating your own wrapper that would either:

• "Proxy" the WinRT object, and make that proxy listen for events from the WinRT object and set the properties
• Make something that looks like an observable and projected up from the WinRT layer (e.g. it has a "bind" function that takes a callback etc.

Answer 2

I didn't need to worry about two-way binding but similar code as described below worked out for me. Note: please don't follow the JS method-naming convention shown.

C#

public sealed class Stock
{
   //... other private/internal methods/members
   private String _symbol;

   public string Symbol
   {
       get
       {
           return this._symbol;
       }
   }
}

JS

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

var projectedStockObj = getStockObjFromWinRTComponent();
var bindableStockObj = _makeBindable(projectedStockObj);
// ... use bindableStockObj in binding scenario(s)

This solution creates a new object and adds the WinRT members to it (which carries their values as well).