Javascript 从Indexdb填充ListView

我正在使用windows 8.1 winJS，试图从indexedb填充listView，但无法使其工作。 我从jsonStr第76行得到一个字符串，但我无法绑定到html

我的javascript

(function () {

"use strict";

var nav = WinJS.Navigation;
var session = WinJS.Application.sessionState;
var util = WinJS.Utilities;

WinJS.Namespace.define("DataExampleA",
    {
        itemList: new WinJS.Binding.List()
    })

var plantsData1 = [

{ id: 1, title: "Banana blast1", text: "Ice cream", picture: "images/plants/Acalypha pendula.jpg" },
{ id: 2, title: "Banana blast2", text: "Ice cream", picture: "images/plants/Acalypha pendula.jpg" },
{ id: 3, title: "Banana blast3", text: "Ice cream", picture: "images/plants/Acalypha pendula.jpg" }
];

var indexedDB = window.msIndexedDB;
var IDBTransaction = window.IDBTransaction;

if (!window.indexedDB) {
    window.console.log("Your browser doesn't support a stable version of IndexedDB.")
}

var db;
var request = window.msIndexedDB.open("plantsDatabase", 1);

request.onerror = function (event) {
    console.log("error: ");
};

request.onsuccess = function (event) {
    db = request.result;
    console.log("success: " + db);
};

request.onupgradeneeded = function (event) {
    console.log('Creating object stores');
    var db = event.target.result;
    var objectStore = db.createObjectStore("plantsStore", { keyPath: "id" });
    for (var i in plantsData1) {
        objectStore.add(plantsData1[i]);
    }
}

function read() {
    var transaction = db.transaction(["plantsStore"]);
    var objectStore = transaction.objectStore("plantsStore");
    var request = objectStore.get("00-03");
    request.onerror = function (event) {
        console.log("Unable to retrieve daa from database!");
    };
    request.onsuccess = function (event) {
        // Do something with the request.result!
        if (request.result) {

            // console.log("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
        } else {
            console.log("Kenny couldn't be found in your database!");
        }
    };
}

function buttonreadAll(plantsBind) {
    var transaction = db.transaction(["plantsStore"]);
    var objectStore = transaction.objectStore("plantsStore");


    objectStore.openCursor().onsuccess = function (event) {
        var cursor = event.target.result;

        if (cursor) {

            var plantsBind = cursor.value;
            var jsonStr = JSON.stringify(plantsBind);
            console.log(jsonStr);
            var dataList = new WinJS.Binding.List(cursor.value);
            // Create a namespace to make the data publicly accessible. 
            var publicMembers =
                {
                   itemList: dataList

                };
            WinJS.Namespace.define("DataExampleA", publicMembers);

            cursor.continue();
        }
        else {
            console.log("No more entries!");
        }
    };
}



WinJS.UI.Pages.define("/pages/hub/hub.html", {
    processed: function (element) {
        return WinJS.Resources.processAll(element);
    },

    // 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) {

        var readAll = document.getElementById("readAll");
        readAll.addEventListener("click", buttonreadAll, false);

    },


    unload: function () {
        // TODO: Respond to navigations away from this page.
    },

    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.



    },
});




})();

（函数（）{
“严格使用”；
var nav=WinJS.Navigation；
var session=WinJS.Application.sessionState；
var util=WinJS.Utilities；
define（“DataExampleA”，
{
itemList:new WinJS.Binding.List（）
})
变量plantsData1=[
{id:1，标题：“香蕉芽1”，文字：“冰淇淋”，图片：“images/plants/Acalypha pendula.jpg”}，
{id:2，标题：“香蕉芽2”，文字：“冰淇淋”，图片：“images/plants/Acalypha pendula.jpg”}，
{id:3，标题：“香蕉芽3”，文字：“冰淇淋”，图片：“images/plants/Acalypha pendula.jpg”}
];
var indexedDB=window.msIndexedDB；
var IDBTransaction=window.IDBTransaction；
如果（！window.indexedDB）{
window.console.log（“您的浏览器不支持IndexedDB的稳定版本。”）
}
var-db；
var request=window.msIndexedDB.open（“plantsDatabase”，1）；
request.onerror=函数（事件）{
日志（“错误：”）；
};
request.onsuccess=函数（事件）{
db=请求。结果；
console.log（“成功：+db”）；
};
request.onupgradeneeded=函数（事件）{
log（“创建对象存储”）；
var db=event.target.result；
var objectStore=db.createObjectStore（“plantsStore”，{keyPath:“id”}）；
用于（电厂中的var i TA1）{
objectStore.add（plantsData1[i]）；
}
}
函数read（）{
var transaction=db.transaction（[“plantsStore”]）；
var objectStore=transaction.objectStore（“plantsStore”）；
var请求=objectStore.get（“00-03”）；
request.onerror=函数（事件）{
log（“无法从数据库中检索daa！”）；
};
request.onsuccess=函数（事件）{
//对请求做点什么。结果！
if（请求结果）{
//console.log（“名称：+request.result.Name+”，年龄：+request.result.Age+”，电子邮件：+request.result.Email）；
}否则{
log（“在数据库中找不到Kenny！”）；
}
};
}
功能按钮READLL（plantsBind）{
var transaction=db.transaction（[“plantsStore”]）；
var objectStore=transaction.objectStore（“plantsStore”）；
objectStore.openCursor（）.onsuccess=函数（事件）{
var cursor=event.target.result；
如果（光标）{
var plantsBind=cursor.value；
var jsonStr=JSON.stringify（plantsBind）；
console.log（jsonStr）；
var dataList=new WinJS.Binding.List（cursor.value）；
//创建命名空间以使数据可公开访问。
var公共成员=
{
itemList:dataList
};
define（“DataExampleA”，publicMembers）；
cursor.continue（）；
}
否则{
log（“没有更多条目！”）；
}
};
}
定义（“/Pages/hub/hub.html”{
已处理：函数（元素）{
返回WinJS.Resources.processAll（元素）；
},
//每当用户导航到此页面时，都会调用此函数。它
//用应用程序的数据填充页面元素。
就绪：功能（元素、选项）{
var readAll=document.getElementById（“readAll”）；
readAll.addEventListener（“单击”，按钮READLL，false）；
},
卸载：函数（）{
//TODO:响应离开此页面的导航。
},
updateLayout:函数（元素）{
/// 
//TODO:响应布局中的更改。
},
});
})();

还有我的html

<div class="section3" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section3'} }">
                  <div id="IconTextTemplate1" class="win-container win-itembox win-item" data-win-control="WinJS.Binding.Template">
                    <div style=" padding: 5px; overflow: hidden; display: -ms-grid;">
                        <img data-win-bind="alt: title; src: picture" src="#" style="width: 80%;  margin-left: 10%; margin-right:10%; margin-bottom:2%; -ms-grid-column: 1;" />
                        <div style="margin: 15px; -ms-grid-row: 2">
                            <h3 data-win-bind="innerText: title"></h3>
                            <h3 data-win-bind="innerText: picture"></h3>
                            <h6 data-win-bind="innerText: text"></h6>
                        </div>
                    </div>
                </div>
                <div id="basicListView" data-win-control="WinJS.UI.ListView"
                     data-win-options="{
                     itemDataSource : DataExampleA.itemList.dataSource,
                     itemTemplate: select('#IconTextTemplate1'),
                     layout : {type: WinJS.UI.GridLayout}}">
                </div> 
                </div>

---

您正在为检索到的每个项目创建一个新列表

使用push方法向listview集合添加新项

---

我不是百分之百肯定这会奏效。我也试过一段时间了，但没有达到我想要的效果。我相信我遇到的问题是，当我添加数据时，事件没有被触发，因此它们没有被可视化。

要添加到Kristof的响应中，您需要替换以下代码：

var dataList = new WinJS.Binding.List(cursor.value);
// Create a namespace to make the data publicly accessible. 
var publicMembers =
    {
    itemList: dataList

};
WinJS.Namespace.define("DataExampleA", publicMembers);

仅使用这一行，因为您已经创建了一个列表：

DataExampleA.itemList.push(cursor.value);

我在一个项目中尝试了这个方法，效果很好

接下来的问题是，当您向数据库添加内容时，如何让ListView自我更新。答案是，如果您向DataExampleA.itemList添加一个项目（ListView绑定到该项目），则会更新ListView。这意味着您需要有一个例程，每当数据库发生更改时更新列表，基本上在应用程序运行时保持这两个例程并行。当然，当应用程序重新启动时，您需要从db重新初始化Binding.List，以便它们同步启动

---

您可以采取的另一种方法是在IndexedDB之上创建自定义数据源，这是通过使用接口方法的某些部分实现对象来实现的，然后使用该接口方法来创建自定义数据源。这需要做更多的工作，但如果您预期会有一个大的数据集，那么扩展性会更好。有关这方面的更多信息，请参阅我的第7章“采集控制数据源”一节。

不要使用全局db变量。

我爱你的书，解释得太好了。我还有另外一个问题，如何刷新listView，因为当我单击ButtonReadll（）时，它会再次添加一些数据，如果将listView绑定到WinJS.Binding.List，则向列表中添加项目将触发listView中的刷新。这就是我在上面试图说的，保持数据库和列表对象同步。@KraigBrockschmidt MSFT tnx供共享。我会看看它，看看如何将它插入到我的框架中。