WinJS Binding to C# Windows Runtime Component class RRS feed

  • Question

  • I can't seems to get databinding to work between my WinJS View code and my Windows Runtime Compoent ViewModel code.  Any suggestions or pointers to sites where this is talked about?

    I'm coming from a Xaml/C# background, but needing to make my UI (aka Views) HTML/WinJS.  So I'm treating the HTML/WinJS as a View similar to the Xaml/C#.  But I want everything else to be written using C# code.  Therefore, I'm making my ViewModels from a Windows Runtime Component project and setting a local variable in the WinJS to represent an instance of the ViewModel.  However, when I try to bind to a simple string property on the ViewModel, I get the following javascript exception:

    Exception is about to be caught by JavaScript library code at line 8652, column 17 in ms-appx://microsoft.winjs.1.0/js/base.js
    0x800a13d5 - JavaScript runtime error: Cannot define property '_getObservable': object is not extensible
    File: base.js, Line: 8652, Column: 17

    Here is the code in my home.js file that gets the ViewModel instance and processes the bindings:

    (function () {
        "use strict";

        var _viewModel;

        WinJS.UI.Pages.define("/pages/home/home.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
                _viewModel = ViewModels.ViewModelLocator.viewModelTest;

                WinJS.Namespace.define("Application.Pages.Home", { "ViewModel": _viewModel });
                WinJS.Binding.processAll(null, Application.Pages.Home.ViewModel);

    And here is the simple home.html code with the data-win-bind attribute:

            <section aria-label="Main content" role="main" data-win-bindsource="Application.Pages.Home">
                <h2 data-win-bind="innerText: ViewModel.testString"></h2>
                <h3>Test String Property: <span data-win-bind="innerText: testString"></span></h3>
                <button id="changeTestStringButton">Change testString value</button>

    Monday, April 22, 2013 7:41 PM


All replies

  • Hi chrisaswain,

    Thanks for your post.

    In order to better help you with your question, I'm trying to involve some senior engineers into the issue and it will take some time. Your patience will be greatly appreciated.

    best regards,

    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, April 23, 2013 9:03 AM
  • As far as I know you can't bind to Windows Runtime Components in HTML / JavaScript :-( 
    Tuesday, April 23, 2013 10:14 PM
  • This is true.  However, I was wondering if someone has come up with a solution.  It would be nice if there were an opensource project out there so the community could improve on it over time.  I'm sure I'm not the only Xaml/C# developer out there who needs to use HTML/WinJS for my Views layer.  

    I'm hearing people suggest creating JavaScript wrapper objects to bind to and pass the property values on to the C# component.  I've even seen a solution that uses a mixin (something I don't quite understand yet).  That solution is in this post.

    We may take the approach of using a T4 template or a post-build task to generate JavaScript wrapper classes that expose what we want to bind to.  However, I'm looking into the mixin solution above as well.  

    Any pointers or suggestions from the community would be appreciated.  And if the Microsoft team wants to work a solution to this scenario into WinJS or a WinJS.Contrib project, all the better.  


    Wednesday, April 24, 2013 7:17 PM