WinJS Repeater仅绑定第一个属性

Question

我有一个包含两个属性的对象列表，我希望我的转发器能够显示每个属性。第一个属性应位于<h2>标记内，第二个属性应位于<h3>标记内。

HTML：

<div class="dataColumns" data-win-control="WinJS.UI.Repeater">
  <h2 data-win-bind="textContent: Title"></h2>
  <h3 data-win-bind="textContent: SomeOtherProperty"></h3>
</div>

JS：

var columnData = new WinJS.Binding.List([
        { Title: 'First Title', SomeOtherProperty: 'First SomeOtherProperty' },
        { Title: '2nd Title', SomeOtherProperty: '2nd SomeOtherProperty' }]);

document.querySelector('.dataColumns').winControl.data = columnData;

这是实际输出，如DOM Explorer中所示：

<div class="dataColumns win-repeater win-disposable" data-win-control="WinJS.UI.Repeater">
  <h2 class="win-disposable">First Title</h2>
  <h2 class="win-disposable">2nd Title</h2>
</div>

为什么每个项目只显示<h2>？

以下是我的预期：

<div class="dataColumns win-repeater win-disposable" data-win-control="WinJS.UI.Repeater">
  <h2 class="win-disposable">First Title</h2>
  <h3 class="win-disposable">First SomeOtherProperty</h3>
  <h2 class="win-disposable">2nd Title</h2>
  <h3 class="win-disposable">2nd SomeOtherProperty</h3>
</div>

Answer 1

Repeater模板可能只有一个直接后代元素（如下例所示，单个子div：

<div class="dataColumns" data-win-control="WinJS.UI.Repeater"         >
    <div>
        <h2 data-win-bind="textContent: Title"></h2>
        <h3 data-win-bind="textContent: SomeOtherProperty"></h3>
    </div>
</div>

结果：

您也可以考虑使用WinJS.Binding.Template作为Repeater的内容：

<div class="template" data-win-control="WinJS.Binding.Template">
    <div>
        <h2 data-win-bind="textContent: Title"></h2>
        <h3 data-win-bind="textContent: SomeOtherProperty"></h3>        
    </div>
</div>
<div class="dataColumns" data-win-control="WinJS.UI.Repeater" 
     data-win-options="{template: select('.template')}">

</div>