动态选择 WinJS.Binding.Template（不是 ItemTemplate）答案

【问题标题】：Dynamically select WinJS.Binding.Template (Not ItemTemplate)动态选择 WinJS.Binding.Template（不是 ItemTemplate）
【发布时间】：2014-09-10 00:02:52
【问题描述】：

有没有办法将值绑定到 winControl.template？我有一个具有 2 或 3 个级别的分层数据结构。我想为叶子和节点设置不同的模板。我尝试过这样的事情：

<ul id="categoriesL1Template" data-win-control="WinJS.Binding.Template">
  <li>
    <h3 data-win-bind="textContent: name"></h3>
    <ul data-win-control="WinJS.UI.Repeater"
        data-win-bind="winControl.data: subList;
                       winControl.template: template"></ul>
  </li>
</ul>

而对象中的模板是：

template: document.getElementById('nodeTemplate').winControl

或

template: document.getElementById('leafTemplate').winControl

但我收到 JavaScript 运行时错误：不支持值参数中的循环引用

有什么建议吗？

谢谢！

【问题讨论】：

标签： windows-phone-8 binding winjs

【解决方案1】：

以下是一些示例，说明如何使用嵌套的 Repeaters 和 Binding.Templates 以及使用中继器的内联模板：

WinJS.Namespace.define("Data", {
    list: new WinJS.Binding.List([{
        text: 'one',
        sublist: new WinJS.Binding.List([{
            text: 'sub: one'
        },
        {
            text: 'sub: two'
        }])
    },
    {
        text: 'two',
        sublist: new WinJS.Binding.List([{
            text: 'sub: one'
        },
        {
            text: 'sub: two'
        }])
    }])
});


WinJS.Application.onready = function () {
    WinJS.UI.processAll().then(function () {
    });
};

WinJS.Application.start();

HTML

<h2>Repeater with inline template with nested Repeater: </h2>
<ul data-win-control="WinJS.UI.Repeater" data-win-options="{data: Data.list}">
    <li>
        <span data-win-bind="textContent: text"></span>
        <span> sub list: </span>
        <ul data-win-control="WinJS.UI.Repeater"
            data-win-bind="winControl.data: sublist">
            <li data-win-bind="textContent: text"></li>
        </ul>
    </li>
</ul>

<h2>Repeater with WinJS.Binding.Template with nested Repeater</h2>
<div class="nested" data-win-control="WinJS.Binding.Template">
    <li data-win-bind="textContent: text"></li>
</div>
<div class="template" data-win-control="WinJS.Binding.Template">
    <li>
        <span data-win-bind="textContent: text"></span>
        <span> sub list: </span>
        <ul data-win-control="WinJS.UI.Repeater"
            data-win-options="{template: select('.nested')}"
            data-win-bind="winControl.data: sublist">
        </ul>
    </li>
</div>
<ul data-win-control="WinJS.UI.Repeater"
    data-win-options="{data: Data.list, template: select('.template')}">
</ul>

我倾向于使用声明性select() 助手来分配Binding.Templates，如果它们是声明式定义的。另一件事是我在选项中分配模板而不是通过绑定。

就您所看到的问题而言，它可能与您的数据结构有关：Circular reference in value argument not supported。

您还可以查看Repeater sample on MSDN，它也有一个嵌套示例。

【讨论】：