WinJS binding to nested control

Question

I am trying to implement semantic zoom control in my application. Here is a fragment of one of my 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, that semanticZoomDiv is empty.

However, if I remove attribute

data-win-control="WinJS.UI.SemanticZoom"

from semanticZoomDiv two ListViews render and are correctly filled with data. It seems like WinJS has problems with binding data to nested controls? (ListView controls are inside SemanticZoom control - after removal of outer SemanticZoom control data binds correctly).

I managed to make semantic zoom work using binding to global namespace via data-win-options, but I want to provide data for my page through view model, hence my trials to use data-win-bind.

Scott Isaacs Scott Isaacs · Accepted Answer · 2013-07-26T20:05:09

I believe this is an object scoping issue, but am not on Win8 at the moment to verify. If I'm right, you can expose groupedList from your JavaScript code similarly to this.

WinJS.Namespace.define("YourApp", {
    groupedList: groupedList,
});

and then change your declarative binding to include the YourApp namespace. That way your data is not in the global namespace.

Alternatively, you can do the data binding in the .js file

zoomedInListView.winControl.itemDataSource = groupedList.dataSource;
zoomedInListView.winControl.groupDataSource = groupedList.groups.dataSource;
zoomedOutListView.winControl.itemDataSource = groupedList.groups.dataSource;

WinJS binding to nested control

1 Answers