2

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

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

来自语义ZoomDiv 的两个 ListView 呈现并正确填充了数据。似乎 WinJS 在将数据绑定到嵌套控件时存在问题？（ListView 控件位于 SemanticZoom 控件内部 - 移除外部 SemanticZoom 控件数据后正确绑定）。

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

4

1 回答 1

0

我相信这是一个对象范围问题，但目前不在 Win8 上进行验证。如果我是对的，您可以groupedList从您的 JavaScript 代码中公开与此类似的内容。

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;
于 2013-07-26T20:05:09.273 回答