在Windows 8應用程序中顯示和隱藏項目

我在寫我的第一個Windows 8應用程序，但我已經被卡住了。在Windows 8應用程序中顯示和隱藏項目

我想要做的是顯示一個html/winjs元素，這取決於在列表視圖中單擊哪個索引。我寫的當前代碼在一定程度上起作用。它將顯示第一個元素（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; 
     } 
    }); 
}))

預先感謝任何回覆:)

來源

2013-01-03 Joel Murphy

您是否嘗試過使用'DOM Inspector'來查看CSS是否正確應用於「第二個」'ListView'？ –