Windows phone 8 动态选择WinJS.Binding.Template（非ItemTemplate）

是否有办法将值绑定到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>

或

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

有什么建议吗

---

谢谢

以下是一些示例，说明如何将嵌套的

转发器

s与

绑定。模板

s和带转发器的内联模板一起使用：

JS

HTML

带内嵌模板的中继器和嵌套中继器：


子列表：





带WinJS.Binding.Template的转发器和嵌套转发器


子列表：

我倾向于使用声明性的

select（）

helper来分配

Binding.Template

s（如果它们是声明性定义的）。另一件事是，我在选项中分配模板，而不是通过绑定

就您看到的问题而言，它可能是您的数据结构中的某个方面：

此外，您还可以查看，它还有一个嵌套的示例

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

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

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

<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>