1

I'm learning (trying) JavaScript/WinJS with new VS2015 RC. I created an UAP Project and I want to bind templates.

I have seen few tutorials and examples but when try myself I get that error with the render property.

Here are code implied (JavaScript):

    WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            var templateControl = element.querySelector("#templateControl");

            var obj = { propOne: "Text text text", propTwo: 2 };
            //fails here
            templateControl.winControl.render(obj, 
                element.querySelector("#renderHere"));
        }
    });

code (HTML):

<div id="renderHere"></div>
    <!--Template-->
<div id="templateControl" data-win-control="WinJS.Binding.Template">
    <p data-win-bind="innerText:propOne"></p>
    <p data-win-bind="innerText:propTwo"></p>
</div>

I have a 'click' event on 'templateControl' and works fine, however, as I said, winControl throw me undefined or null. I'm pretty sure it's me, but it's all at preview so there it's the doubt.

Thanks

2
  • Have you tried using getElementById instead of querySelector? I don't know winjs so it's just a wild guess. Or should they be queried using the winjs query function msdn.microsoft.com/en-us/library/windows/apps/br229847.aspx
    – GillesC
    May 11, 2015 at 12:26
  • Yes, I tried it. I didn't want to make a loong post, but, I tried that, tried getting winControl into a var and then render. renderHere into a var and after render it... and something else but I don't even rembember. Mmm... I saw codeShow, and try.buildwinjs.com binding templates.
    – Frs
    May 11, 2015 at 12:31

1 Answer 1

0

You don't need to use WinJS Template to bind data with HTML, you can do it this way:

<div id="someId">
    <p data-win-bind="innerText: propOne"></p>
    <p data-win-bind="innerText: propTwo"></p>
</div>

JS:

WinJS.UI.Pages.define("default.html", {
    ready: function (element, options) {
        var obj = { propOne: "Text text text", propTwo: 2 };
        WinJS.Binding.processAll(element.querySelector("#someId"), obj);
    }
});

Also, winControl property is set when WinJS.UI.processAll() is done, until then it's undefined.

WinJS Templates are best suited for use with different controls such as List, Repeater etc.

1
  • Thanks for the answer, at the end I did it that way. I'm not able to make it works with templates, even with processAll().done(// code), having the same issue.
    – Frs
    May 14, 2015 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.