Question

我正在编写我的第一个Windows 8应用程序，但我已经被卡住了。

我想要做的是显示一个html / winjs元素，具体取决于在listview中单击的索引。我写的当前代码在某种程度上起作用。它将显示第一个元素（albumListView），但之后不会显示其他项目。我已经阅读了WinJS文档，但我仍然无法弄清楚我做错了什么。

我做错了什么？是否有更简单的方法来实现我想要实现的目标？

这是我写的代码：

我的HTML：

<div id="albumListView" class="hidden" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#albumTemplate'), layout:{type:WinJS.UI.GridLayout}, selectionMode:'none'}"></div>
<div id="songsListView" class="hidden" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#songsTemplate'), layout:{type:WinJS.UI.ListLayout}}"></div>

我的CSS：

.hidden {
    display:none;
}

我的JS：

function hidePanelViewItems() { //hide all panel items

    var items = [albumListView, songsListView];

    for (var i = 0; i < items.length; i++) {
        WinJS.Utilities.addClass(items[i], "hidden");
    }

    return true;
}

function showItem(item) { //show a single item in the panel
    hidePanelViewItems();
    WinJS.Utilities.toggleClass(item, "hidden");

    return true;
}

args.setPromise(WinJS.UI.processAll().done(function () {
    //hide all panel listviews
    hidePanelViewItems();
    //show the album view as a default
    showItem(albumListView);

    //deal with menu item clicks
    menuListView.addEventListener("iteminvoked", function (eventInfo) {
        switch (eventInfo.detail.itemIndex)
        {
            case 0:
                showItem(albumListView);
                break;
            case 1:
                showItem(songsListView);
                break;
        }
    });
}))

预先感谢任何回复：）

Answer 1

我遇到了类似的事情。如果将listview的样式设置为display：none，则需要调用forceLayout（）以使其再次可见。 http://msdn.microsoft.com/en-us/library/windows/apps/hh758352.aspx

Answer 2

解决！经过几个小时的乱码，我现在发现它一直很好！问题是数据实际上并没有绑定到我的列表视图，因为它们被隐藏了！

在Windows 8应用程序中显示和隐藏项目

2 个答案: