Remove From My Forums

Template Binding, possible clousure issue?

Question

Hi Guys,

I am trying to bind template as mentioned in blog "http://stephenwalther.com/archive/2012/02/27/metro-using-templates.aspx".

WinJS.UI.Pages.define("/html/schedule.html", {
        ready: function (targetElement) {
            var myTest = [{ field1: 'Hello1', field2: 'Hello2' },
                          { field1: 'Hello3', field2: 'Hello4' }];
                    
            var template = new WinJS.Binding.Template(null, { href: "/templates/schedule/playgroundtemplate.html" });
            var targetElement = document.getElementById("myTest");

            var a, x;
            for (var i = 0; i < myTest.length; i++) {
                x = myTest[i];
                template.render(x, targetElement);
                
            }
        }
    });

Below is template

<html>
    <head><title>template</title></head>
    <body>
        <div style="border: 1px solid red;">
            <h2 data-win-bind="innerText: field1"></h2>
        </div>
        <div style="border: 1px solid green;">
            <h4 data-win-bind="innerText: field2"></h4>
        </div>
    </body>
</html>

And below is screenshot of how it looks like after binding.

Any idea why would it behave like that? I already tried self executing function and passing array element as parameter as well as trying different scopes for parameter and no results. I am wondering am I missing something here?

Regards.

Tuesday, July 24, 2012 4:27 PM

Answers

It appears that you've found a bug in the template control!

The bug probably has something to do with the fact that loading and parsing the template from an external HTML file is async, and multiple calls to render before that happens aren’t being queued up properly.

The best way I can think to fix it is to not put your templates in a bunch of different HTML files. First to avoid this bug, and second because it’s probably faster to have all your templates processed and on-hand as the app is loading.

What I do is create a hidden section of default.html to hold my templates, and then I can get them by ID when I need to render them:

<body>
    <div id="myTest"></div>
    <div style="display: none">
        <!-- templates go in this div -->
        <div id="playgroundTemplate" data-win-control="WinJS.Binding.Template">
            <div style="border: 1px solid red;">
                <h2 data-win-bind="innerText: field1"></h2>
            </div>
            <div style="border: 1px solid green;">
                <h4 data-win-bind="innerText: field2"></h4>
            </div>
        </div>
    </div>
</body>

function ready() {
    var myTest = [{ field1: 'Hello1', field2: 'Hello2' },
                  { field1: 'Hello3', field2: 'Hello4' }];

    var targetElement = document.getElementById("myTest");

    // Assumes WinJS.UI.processAll was completed during onactivated.
    var template = document.getElementById("playgroundTemplate").winControl;

    var a, x;
    for (var i = 0; i < myTest.length; i++) {
        x = myTest[i];
        template.render(x, targetElement);
    }
};

Edited by Bryan Thomas Tuesday, July 24, 2012 5:22 PM
Proposed as answer by Bryan Thomas Tuesday, July 24, 2012 5:23 PM
Marked as answer by TorontoAnonymous Tuesday, July 24, 2012 6:10 PM

Tuesday, July 24, 2012 5:22 PM

All replies