Repeater Inside Pivot Control (Or Hub Control) Is Undefined

Question

I am having trouble putting a Repeater inside a Repeater inside a PivotItem, when I try to access the Repeater via JavaScript, the winControl property is always null, am I missing something?

HTML:

<div id="divContent" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'Header', selectedIndex: 0}">
    <div data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Repeated Data'}">
        <div id="rptData" data-win-control="WinJS.UI.Repeater"></div>
    </div>
</div>

JavaScript:

ready: function (element, options) {
    rptData.winControl.data = getData();
}

rptData returns the DIV Element, but winControl is undefined.

The same thing happens when using a Repeater inside a Hub control in Windows 8.1 (none phone)

Answer 1

rptData.winControl is undefined because WinJS did not still process the element. WinJS.UI.processAll() is async function. You can process it manually and use it when it's processed:

WinJS.UI.process(rptData).then(function () {
        rptData.winControl.data = getData();        
});