Question

我正在尝试在我的应用程序中实现语义缩放控制。这是我的一个页面的片段：

<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>

问题是，semanticZoomDiv是空的。

但是，如果我删除属性

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

从semanticZoomDiv

两个ListViews渲染并正确填充数据。似乎WinJS将数据绑定到嵌套控件有问题？（ListView控件位于SemanticZoom控件内 - 删除外部SemanticZoom控件数据后正确绑定。）

我设法通过data-win-options使用绑定到全局命名空间来进行语义缩放工作，但是我想通过视图模型为我的页面提供数据，因此我试用了使用data-win-bind。

Answer 1

我认为这是一个对象范围问题，但目前尚未在Win8上进行验证。如果我是对的，您可以从JavaScript代码中公开groupedList。

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

然后更改声明性绑定以包含YourApp命名空间。这样，您的数据就不在全局命名空间中。

或者，您可以在.js文件中执行数据绑定

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

WinJS绑定到嵌套控件

1 个答案: