Hi all,
I'm having trouble adding semantic zoom to my hub page. I've looked at this sample: http://code.msdn.microsoft.com/windowsapps/HTML-Hub-control-sample-a15e5c2d .
But every time I add "itemDataSource: select('.win-hub').winControl.sections.dataSource" to my ZoomedOutListView, I get this error
0x800a13aa - JavaScript runtime error: Circular reference in value argument not supported
I struck here, please help!
Below is my HTML
<section aria-label="Main content" role="main">
<div class="semantic_zoom" data-win-control="WinJS.UI.SemanticZoom">
<div class="hub" data-win-control="WinJS.UI.Hub" data-win-options="{
headerTemplate : select('.hubHeaderTemplate'),
onheaderinvoked: select('.pagecontrol').winControl.headerInvoked,
}">
<div data-win-control="WinJS.UI.HubSection" data-win-options="{header:'หน้าแรก', isHeaderStatic: true}">
<div class="content">...</div>
</div>
<div data-win-control="WinJS.UI.HubSection" data-win-options="{header:'ข่าวล่าสุด', groupKey: 'group2'}">
<div class="content">...</div>
</div>
<div data-win-control="WinJS.UI.HubSection" data-win-options="{header:'ข่าวน่าสนใจ', groupKey: 'group3'}">
<div class="content">...</div>
</div>
</div>
<!-- ZoomedOut View of the Hub -->
<div class="ZoomedOutListView" data-win-control="WinJS.UI.ListView" data-win-options="{
itemDataSource: select('.win-hub').winControl.sections.dataSource
}">
</div>
</div>
</section>
Thanks in advanced and sorry for my bad English.