locked
Binding and data-win-bindsource RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    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 2, 2011 8:14 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    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 3, 2011 10:57 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    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 3, 2011 10:57 AM
  • Question
    Sign in to vote
    1
    Sign in to vote

    WinJS.Binding.All() was the answer. I didn't need to use WinJS.Binding.All

     

    Thanks!

    Thursday, November 3, 2011 5:48 PM