1

我正在使用 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）的末尾时，标题仍然存在。当我然后滚动回到开头时，标题也再次出现。

我还从ready()“groupedItems.js”的函数中调用 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() 函数调用它时它会起作用？有人有想法吗？是为了获得更好的性能而进行的某种自动项目缓存吗？这怎么能解决？

问候和感谢！

4

1 回答 1

0

首先，这就是可能发生这种情况的原因 - 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;
};
于 2013-08-19T18:36:25.190 回答