Question

有没有办法将值绑定到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运行时错误：不支持value参数中的循环引用

有什么建议吗？

谢谢！

Answer 1

以下是一些示例，说明如何使用带有Repeater的嵌套Binding.Template和带有转发器的内联模板：

JS

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.Template帮助器来分配{{1}}。另一件事是我在选项中分配模板而不是通过绑定。

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

此外，您还可以查看它有嵌套示例的Repeater sample on MSDN。

动态选择WinJS.Binding.Template（Not ItemTemplate）

1 个答案: