javascript - Windows 8 网格模板 JS 应用程序，CSS 操作不会显示在 groupedItems View 中的所有选定元素上

Question

我正在使用 Win8 GridView 模板来显示来自新闻站点的信息。在下方的菜单栏中，我实现了一个关闭标题的功能，因此只有图片仍然可见。

此函数位于包含在“default.html”中的“global.js”文件中，因此它随处可用，看起来像这样:

//function to turn titles off and on
function titleToggle() {
    var titles = document.getElementsByClassName("item-overlay");
    for (var i = 0; i < titles.length; i++) {
        if (Global.titlesAreOn) {
            titles[i].style.display = "none";
        }
        else {
            titles[i].style.display = "";
        }
    }  
    Global.titlesAreOn = !Global.titlesAreOn;
};

因此，当我从菜单栏调用此函数时，它适用于第一个元素，但当我滚动到 groupedItems View (hubview) 的末尾时，标题仍然存在。当我然后滚动回开头时，标题也再次出现。

我还从“groupedItems.js”的 ready() 函数调用 titleToggle 函数，以检查是否根据全局变量显示标题。当我这样做时(每当我回到中心页面时)，它一直在工作，正如预期的那样。

ui.Pages.define("/pages/groupedItems/groupedItems.html", {        
        navigateToGroup: function (key) {
            nav.navigate("/pages/groupDetail/groupDetail.html", { groupKey: key });
        }, 

        ready: function (element, options) {

            appbar.winControl.disabled = false;
            appbar.winControl.hideCommands(["fontSizeBt"]);      
            appbar.winControl.showCommands(["titleToggle"]);

            if (Global.titlesAreOn == false) {
                Global.titlesAreOn = true;
                Global.titleToggle();
            }

我制作了一个短视频来展示这个问题，因为它有点难以解释 --> http://youtu.be/h4FpQf1fRBY我希望你明白了？

为什么当我从 ready() 函数中调用它时它会起作用？有人有想法吗？它是某种自动元素缓存以获得更好的性能吗？这怎么能解决呢？

问候和感谢!

Answer 1

首先，这就是可能发生这种情况的原因 - WinJS 使用单页导航来提供应用体验。这意味着当您导航到一个新页面时，实际上您并没有。相反，内容会从页面中删除，新内容会加载到同一页面中。有可能在您按下按钮的那一刻，并非所有元素都已加载到 DOM 中，因此您的函数无法操作它们。这就是为什么当您从 ready() 函数调用它时它起作用的原因 - 所有内容都加载到 DOM 中。通常最好在 ready() 函数中执行操作。

关于当您向左滑动并且元素再次重新加载标题时的行为 - 由于某种原因，listView 元素正在重新加载。也许您正在使用来自新闻站点的实时数据，并且它们再次使用 listView 控件的模板进行刷新。我不知道，但这没关系。隐藏元素不是我认为的最佳方法。最好有两个模板 - 一个有标题元素，一个没有。按钮单击处理程序应该获取 listView 控件(必须加载它们)并更改它们的模板。

ready: function (element, options) {
     var button = document.getElementById('btn');
     button.addEventListener("click", btnClickHandler);
}

处理程序:

function btnClickHandler(e) {
    var listView = document.getElementById("listView").winControl;
    var template2 = document.getElementById("template2");
    listView.itemTemplate = template2;
};