locked
Binding and data-win-bindsource

    Question

  • Hello everyone,

    I'm trying to use the property data-win-bindsource using the example from http://msdn.microsoft.com/en-us/library/windows/apps/hh440967(v=vs.85).aspx but nothing appears.

    I only have 1 page whose body contains:

    <div data-win-bindsource="data">
        <div data-win-bind="innerText: x"></div>
    </div>
    

    and a default.js file which triggers a WinJS.UI.processAll() and defines the data variable.

    I have tried to define data as:

    • Namespace using WinJS.Namespace.define("data", {x:"name"});
    • Global variable: window.data = {x:"name"};
    • Local variable: var data = {x:"name"};

    I've included all the winjs files just in case I need something other than binding.js but the result is always the same: nothing :(

    Any tip?

    Thanks!!

    Wednesday, November 02, 2011 8:14 PM

Answers

  • Did you invoke WinJS.Binding.processAll()?

    Here is an example that works for me:

    HTML file:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=1024, height=768" />
        <title>HelpBinding</title>
        <!-- WinJS references -->
        <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
        <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/wwaapp.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/binding.js"></script>
        <!-- HelpBinding references -->
        <link rel="stylesheet" href="/css/default.css" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div class="fixed-layout">
            <div data-win-bindsource="mySpace.data">
                <div data-win-bind="innerText: x"></div>
            </div>
            <button id="myButton">
                Click</button>
        </div>
    </body>
    </html>
    
    

    JavaScript file:

     

    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
         Debug.enableFirstChanceException(true);
    
         //Make the object observable
         var data = WinJS.Binding.as({ x: "now" });
         
        WinJS.Application.onmainwindowactivated = function(e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
               
                WinJS.UI.processAll().then(function(){
                   
                    WinJS.Binding.processAll(document.body);
            });
    
                var i = 1;
                document.getElementById("myButton").addEventListener("click", function () {
                    i += 1;
                    console.log('clicked ' + i);
                    data.x = i; //change the bound data value
                });
            }
        }
        
        //Make name visible
        WinJS.Namespace.define('mySpace', {
            data: data
        });
    
    
        WinJS.Application.start();
    })();
    

    Hope this helps.

     

     




    Thursday, November 03, 2011 10:57 AM

All replies

  • Did you invoke WinJS.Binding.processAll()?

    Here is an example that works for me:

    HTML file:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=1024, height=768" />
        <title>HelpBinding</title>
        <!-- WinJS references -->
        <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
        <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/wwaapp.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/binding.js"></script>
        <!-- HelpBinding references -->
        <link rel="stylesheet" href="/css/default.css" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div class="fixed-layout">
            <div data-win-bindsource="mySpace.data">
                <div data-win-bind="innerText: x"></div>
            </div>
            <button id="myButton">
                Click</button>
        </div>
    </body>
    </html>
    
    

    JavaScript file:

     

    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
         Debug.enableFirstChanceException(true);
    
         //Make the object observable
         var data = WinJS.Binding.as({ x: "now" });
         
        WinJS.Application.onmainwindowactivated = function(e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
               
                WinJS.UI.processAll().then(function(){
                   
                    WinJS.Binding.processAll(document.body);
            });
    
                var i = 1;
                document.getElementById("myButton").addEventListener("click", function () {
                    i += 1;
                    console.log('clicked ' + i);
                    data.x = i; //change the bound data value
                });
            }
        }
        
        //Make name visible
        WinJS.Namespace.define('mySpace', {
            data: data
        });
    
    
        WinJS.Application.start();
    })();
    

    Hope this helps.

     

     




    Thursday, November 03, 2011 10:57 AM
  • WinJS.Binding.All() was the answer. I didn't need to use WinJS.Binding.All

     

    Thanks!

    Thursday, November 03, 2011 5:48 PM