windows 8 - WinJS binding to nested control -
i trying implement semantic zoom control in application. here fragment of 1 of pages:
<div id="semanticzoomdiv" data-win-control="winjs.ui.semanticzoom"> <div id="zoomedinlistview" class="win-selectionstylefilled" data-win-control="winjs.ui.listview" data-win-bind="wincontrol.itemdatasource: groupedlist.datasource; wincontrol.groupdatasource: groupedlist.groups.datasource;" data-win-options="{ itemtemplate: select('#mediumlisticontexttemplate'), groupheadertemplate: select('#headertemplate'), selectionmode: 'none', tapbehavior: 'none', swipebehavior: 'none' }"> </div> <div id="zoomedoutlistview" data-win-control="winjs.ui.listview" data-win-bind="wincontrol.itemdatasource: groupedlist.groups.datasource;" data-win-options="{ itemtemplate: select('#semanticzoomtemplate'), selectionmode: 'none', tapbehavior: 'invoke', swipebehavior: 'none' }"> </div> </div>
the problem is, semanticzoomdiv empty.
however, if remove attribute
data-win-control="winjs.ui.semanticzoom"
from semanticzoomdiv 2 listviews render , correctly filled data. seems winjs has problems binding data nested controls? (listview controls inside semanticzoom control - after removal of outer semanticzoom control data binds correctly).
i managed make semantic zoom work using binding global namespace via data-win-options, want provide data page through view model, hence trials use data-win-bind.
i believe object scoping issue, not on win8 @ moment verify. if i'm right, can expose groupedlist
javascript code this.
winjs.namespace.define("yourapp", { groupedlist: groupedlist, });
and change declarative binding include yourapp
namespace. way data not in global namespace.
alternatively, can data binding in .js file
zoomedinlistview.wincontrol.itemdatasource = groupedlist.datasource; zoomedinlistview.wincontrol.groupdatasource = groupedlist.groups.datasource; zoomedoutlistview.wincontrol.itemdatasource = groupedlist.groups.datasource;
Comments
Post a Comment