Показване и скриване на елементи в приложението 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;
}

My 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;
        }
    });
}))

Благодаря предварително за всякакви отговори :)


person Joel Murphy    schedule 03.01.2013    source източник
comment
Опитвали ли сте да използвате DOM Inspector, за да видите дали CSS е правилно приложен към втория ListView?   -  person louis.luo    schedule 03.01.2013


Отговори (2)


Попаднах на нещо подобно. Ако зададете стил на изглед на списък на display:none, трябва да извикате forceLayout(), за да го направите видим отново. http://msdn.microsoft.com/en-us/library/windows/apps/hh758352.aspx

person bmurmistro    schedule 11.05.2013

Решено! След часове бъркане с този код, сега открих, че беше добре през цялото време! Проблемът беше, че данните всъщност не бяха обвързващи с моите списъци, тъй като бяха скрити!

person Joel Murphy    schedule 03.01.2013
comment
Не забравяйте да използвате fadeIn/fadeout анимации ;P - person Jacob Morrison; 04.01.2013