Windows 8网格模板JS应用程序，CSS操作不会显示在groupedItems视图中的所有选定项目上

Windows 8 Grid Template JS App, CSS manipulations dont show on all selected items in groupedItems view

本文关键字：视图 groupedItems 项目 显示 网格 JS 应用程序 操作 CSS Windows      更新时间：2023-09-26

我正在使用Win8网格视图模板来显示新闻网站的信息。在下面的菜单栏中，我实现了一个关闭标题的功能，这样只有图片仍然可见。

这个函数在一个"global.js"文件中，该文件包含在"default.html"中，所以它在任何地方都可用，看起来像这样：

//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视图（hubview）的末尾时，标题仍然存在。当我滚动回到开头时，标题也在那里。

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

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（）函数调用它时，为什么它能工作？有人有主意吗？它是某种自动项目缓存以获得更好的性能吗？如何解决这一问题？

问候和感谢！

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

关于向左向后滑动并且项目再次重新加载标题时的行为-由于某种原因，listView项目正在重新加载。也许你使用的是新闻网站上的实时数据，而它们又用listView控件的模板刷新了。我不知道，但没关系。我认为隐藏元素不是最好的方法。最好有两个模板——一个带有title元素，另一个没有。按钮单击处理程序应该获取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;
};
相关文章：