WinJS.UI.ListView 在快照视图中不起作用答案

【问题标题】：WinJS.UI.ListView not working in snapped viewWinJS.UI.ListView 在快照视图中不起作用
【发布时间】：2024-01-21 06:48:01
【问题描述】：

我在一个用于 Windows-8 Metro 界面的 JavaScript 项目中使用WinJS.UI.ListView。

这是 HTML 代码：

<div id="myMain">
    <div id="myListTemplate" data-win-control="WinJS.Binding.Template">
        <div class="myListViewItem">
            <p data-win-bind="innerText: description"></p>
        </div>
    </div>
    <div id="myListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemTemplate: myTemplate, layout: {type: WinJS.UI.ListLayout} }">
    </div>
 </div>

以及 JavaScript 的一部分：

ready: function (element, options) {
            // Set up the ListView.
            var myLView = myListView.winControl;
            WinJS.UI.setOptions(favoritesLView, {
                itemDataSource: dataSource,
                oniteminvoked: this.onItemInvoked.bind(this),
                selectionMode: WinJS.UI.SelectionMode.none
            });
        },

dataSource 是存储列表信息的位置。它是从以下位置获得的列表： var myList = new WinJS.Binding.List(myJSONarray);

代码在横向和纵向视图中工作，但在快照视图中不起作用。尽管myList 包含所有元素，但列表视图显示为空。

这是 Windows 8 中的错误吗？有人知道解决方法吗？我发现这个链接有同样的问题，但它的解决方案对我不起作用： http://social.msdn.microsoft.com/Forums/pl-PL/winappswithhtml5/thread/ce8c722d-526b-4226-9e40-642ddb37422b

【问题讨论】：

您能否发布@media 类型的CSS 条目，好吗？他们可能会显示一些线索。
@media 类型为空。我删除了它们。我试图使这个示例尽可能简单并找出错误所在。在@media 类型中，我所做的只是调整左边距和宽度，仅此而已......事实上，当我更改为 snapped 时，我可以看到 div myListView，它在那里但它是空的，因为我可以使用 DOM 浏览器进行检查。但在其他视图中有内容。
你能发布你的 updateLayout 或 initializeLayout 代码吗？屏幕大小变化时你调用updateLayout了吗？

标签： javascript windows-8 microsoft-metro

【解决方案1】：

ListView 不显示的一个原因是元素或任何父元素的显示设置为“无”。当元素再次可见时，您将需要调用 listView.forceLayout()。请参阅下面来自 MSDN 的解释，http://msdn.microsoft.com/en-us/library/windows/apps/hh758352.aspx

当您设置 ListView 或其父级的 style.display 属性时元素为“无”，应用会丢弃有关这些元素的布局信息元素。当您将显示属性的值更改回使所有内容再次可见的样式，应用程序将布局所有元素，但 ListView 不会收到有关当前布局，并将有一个无效的布局。您可以通过以下方式解决问题当您再次使 ListView 可见时调用此函数。

【讨论】：