WinJS Repeater Only Binding First Property

Question

I have a list of objects with two properties, and I want my repeater to display each of them. The first property should be inside an <h2> tag, and the second should be in an <h3> tag.

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;

Here is the actual output, as seen in the 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>

Why is only the <h2> shown for each item?

Here is what I would have expected:

<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

A Repeater template may have only one direct descendant element (like in the case below, a single child 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>

Results:

You may also consider using a WinJS.Binding.Template for the contents of the 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>