Question

我有一些项目，我按下按钮将它们标记为收藏，这是代码：

function AddToFavorites() {
    //called when a shop is added as as a favorite one.
    //first we check if already is favorite
    var favoritesArray = getStoreArray();
    var alreadyExists = exists();
    if (!alreadyExists) {
        favoritesArray.push(itemHolder);
        var storage = window.localStorage;
        storage.shopsFavorites = JSON.stringify(favoritesArray);
    }   
}

function exists() {
    var alreadyExists = false;
    var favoritesArray = getStoreArray();
    for (var key in favoritesArray) {
        if (favoritesArray[key].title == itemHolder.title) {
            //already exists
            alreadyExists = true;
        }
    }
    return alreadyExists;
}

function getStoreArray() {
    //restores our favorites array if any or creates one
    var storage = window.localStorage;
    var favoritesArray = storage.shopsFavorites;
    if (favoritesArray == null || favoritesArray == "") {
        //if first time
        favoritesArray = new Array();
    } else {
        //if there are already favorites
        favoritesArray = JSON.parse(favoritesArray);
    }
    return favoritesArray;
}

我有一个favorites.html将这些列为清单。我遇到的问题是每次添加或删除项目时列表都不会自动更新。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Αγαπημένα</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="favoritesDetails.css" rel="stylesheet" />
    <script src="favoritesDetails.js"></script>
</head>
<body>
    <div class="favoritesDetails fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Αγαπημένα</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
                <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <div class="mediumListIconTextItem">
            <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
            <div class="mediumListIconTextItem-Detail">
                <h4 data-win-bind="innerText: title"></h4>
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate')}">
    </div>
        </section>
    </div>
</body>
</html>

这是JavaScript代码：

// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
var dataArray = [], shopsArray = [];

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;

    shopsArray = getStoreArray();
    if (shopsArray) {
        for (var key in shopsArray) {
            var group = { title: shopsArray[key].title, text: shopsArray[key].subtitle, picture: shopsArray[key].backgroundImage, description: shopsArray[key].description, phoneNumbers: shopsArray[key].content };
            dataArray.push(group);
        }
        var dataList = new WinJS.Binding.List(dataArray);

        // Create a namespace to make the data publicly
        // accessible. 
        var publicMembers =
            {
                itemList: dataList
            };
        WinJS.Namespace.define("DataExample", publicMembers);
    }

    WinJS.UI.Pages.define("/pages/favoritesDetails/favoritesDetails.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.

        ready: function (element, options) {
        },

        unload: function () {
        },

        updateLayout: function (element, viewState, lastViewState) {
        }    
    });
})();

function getStoreArray() {
    //restores our favorites array if any or creates one
    var storage = window.localStorage;
    var favoritesArray = storage.shopsFavorites;
    if (favoritesArray == null || favoritesArray == "") {
        //if first time
        favoritesArray = new Array();
    } else {
        //if there are already favorites
        favoritesArray = JSON.parse(favoritesArray);
    }
    return favoritesArray;
}

那么当在localDB中存储/删除新收藏夹时，如何更新收藏夹HTML页面？我可以在那里添加事件监听器吗？

Answer 1

存储收藏夹的代码是否是同一个应用程序的一部分？

如果是这样，我会考虑将您喜欢的内容添加到您用于绑定到ListView的基础WinJS.Binding.list，然后将更新的列表信息存储在数据库中，而不是尝试对更改中的更改做出反应ListView中的数据库。

查看以下示例，其中显示了如何动态更新ListView：

http://code.msdn.microsoft.com/windowsapps/ListView-custom-data-4dcfb128/sourcecode?fileId=50893&pathId=1976562066

希望有所帮助！

localStorage和updateView + windows 8

1 个答案: