从Indexdb填充ListView

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

我的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. 



    }, 
}); 




})();

和我的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>

来源

2013-10-31 user1024610

为了增加克里斯托夫的反应，要替换此代码：

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在您向数据库添加内容时自行更新。答案是，如果您将一个项目添加到ListView绑定到的DataExampleA.itemList，它将更新ListView。这意味着你需要有一个例程来更新列表，无论何时更改数据库，基本上在应用程序运行时保持两者并行。当应用程序重新启动时，当然，您会从数据库重新初始化Binding.List，以便它们同步启动。

您可以采取的另一种方法是在IndexedDB上创建一个自定义数据源，您可以通过使用IListDataAdapter接口方法的某些部分实现对象来实现该功能，然后使用它创建一个WinJS.UI.VirtualizedDataSource。这是一个稍微多一点的工作，但如果您预计会有大量数据集，那么它的规模会更大。有关详细信息，请参阅我的second preview ebook (free)的第7章“收集控制数据源”一节。

来源

2013-10-31 16:48:19

**爱你书**，这是很好的解释。我还有其他问题，我可以刷新listView，因为它再次添加一些数据，当我点击buttonreadAll（），thaks – user1024610

如果你有一个ListView绑定到一个WinJS.Binding.List，然后添加项目列表将触发刷新列表显示。这正是我想通过保持你的db和List对象同步来说的。 –

@ KraigBrockschmidt-MSFT tnx用于共享。我会看看它，看看如何将它插入我的框架。 –

您正在创建每次检索项的新列表。

使用push方法将新项目添加到listview集合。

我不是100％确定这会起作用。我已经尝试了这一段时间，并没有按照我想要的方式工作。我相信我遇到的问题是，当我添加数据时没有触发事件，并且这样他们没有可视化。

来源

2013-10-31 09:30:39

请勿使用全局数据库变量。

来源

2013-10-31 21:06:17 Josh

从Indexdb填充ListView

回答

相关问题