javascript - vs2015 - JavaScript/WinJS。 .winControl 错误(未定义或空引用)

Question

我正在使用新的 VS2015 RC 学习(尝试)JavaScript/WinJS。我创建了一个 UAP 项目，我想绑定(bind)模板。

我看过一些教程和示例，但是当我自己尝试时，我收到了渲染属性的错误。

以下是隐含代码 (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"));
        }
    });

代码(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>

我在“templateControl”上有一个“单击”事件并且工作正常，但是，正如我所说，winControl 向我抛出未定义或空值。我很确定是我，但是这一切都在预览中，因此存在疑问。

谢谢

Answer 1

您不需要使用WinJS Template将数据与HTML绑定(bind)，您可以这样做:

<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);
    }
});

此外，winControl 属性在 WinJS.UI.processAll() 完成时设置，在此之前它是未定义的。

WinJS 模板最适合与不同的控件一起使用，例如列表、重复器等。