如何在不闪烁整个列表的情况下更新listview组头？ [英] How to update listview group header without blinking the whole list?
问题描述
您好，我正在使用带有分组项目的WinJS.ListView，并且我想以动态方式更改组头（标题中有一个项目计数器），因为我将新项目添加到列表中，但唯一的方法我设法做到这一点是通过调用bindinglist.notifyMutated（）
到绑定列表，我尝试调用bindinglist.groups.notifyMutated（）但没有任何反应。这不是我的解决方案，因为notifyMutated（）使整个列表淡出然后淡入。
请帮助！
您好giohji，
当您使用数据绑定来填充Windows Store javascript应用程序中的ListView时，您可以直接对数据源列表和更改进行更改将自动显示在ListView控件上（无需手动调用"notifyMutated"方法）。
但是，当您对数据源进行更改时，需要针对WinJS.Binding.List对象添加/删除对象（而不是用于创建WinJS.Binding.List的基础javascript数组）。例如：
假设我将以下列表构造为ListView控件的数据源：
function generateTestGroupedData（）{var rawItems = [{title：" Music Player"，subTitle：" music player" }，{title：" Sun Glasses"，subTitle：" sun glasses" }，{title：" Sports Bag" subTitle：" sports bag" }，{title：" T-Shirt"，subTitle：" t-shirt" }，{title：" Laptop"，subTitle：" laptop" }，{title：" Table"，subTitle：" table" }，{title：" Chop Stick"，subTitle：" chop stick" }，{title：" Motor"，subTitle：" motor" }，{title：" Boat"，subTitle：" boat" }，{title：" Flower Seeds"，subTitle：" flower seeds" }，{title：" Red Wines"，subTitle：" red wines" }，{title：" Chocalate"，subTitle：" chocalate" }]; ListViewPageUtils.rawProducts = rawItems; var list = new WinJS.Binding.List（rawItems）; var groupedItems = list.createGrouped（getGroupKey，getGroupData，compareGroups）; //通过WinJS.Namespace.define在全局命名空间中定义ListViewPageUtils.productItems = groupedItems; //将数据源绑定到ListView var lvHost = document.getElementById（'lvGroupedData'）; lvHost.winControl.itemDataSource = ListViewPageUtils.productItems.dataSource; lvHost.winControl.groupDataSource = ListViewPageUtils.productItems.groups.dataSource; } //对于分组数据函数compareGroups（lk，rk）{return lk.charCodeAt（0） - rk.charCodeAt（0）; function getGroupKey（dataItem）{return dataItem.title.toUpperCase（）。charAt（0）; function getGroupData（dataItem）{return {name：dataItem.title.toUpperCase（）。charAt（0）}; }
然后，我可以随机添加一些新项目到我之前创建的数据源列表（WinJS.Binding.List类型）中，更改将立即反映在ListView上（例如）
document.getElementById（'btnAddDataRandom'）。addEventListener（" click"，function（）{var randNum = Math.random（）* 1000％26 ; var newCode ='A'.charCodeAt（0）+ randNum; var newTitle = String.fromCharCode（newCode，newCode，newCode）; var newItem = {title：newTitle，subTitle：newTitle}; ListViewPageUtils.productItems.push（newItem） ;}）;
你也可以打电话给"pop"。或"拼接"或"拼接"直接从WinJS.Binding.List对象中删除项目的方法。以下是有关使用Html5 + js在Windows应用商店应用中进行数据绑定的一些参考：
#Data在带有JavaScript的Windows应用商店应用中进行绑定
http://msdn.microsoft.com/en-us/magazine/jj651576.aspx
#Data绑定（使用JavaScript和HTML的Windows应用商店应用）（Windows）
http://msdn.microsoft.com/en-us/library/windows/apps/hh758311.aspx
Hello, I am using the WinJS.ListView with grouped items and I want to dinamically change the group header (there is an item counter in the header) as I add new items to the list, but the only way I managed to do that is by calling bindinglist.notifyMutated() to the binding list, I tried calling bindinglist.groups.notifyMutated() but nothing happens. This is not a solution for me because notifyMutated() makes the whole list fade out and then fade in.
Please help!
Hi giohji,
When you use data binding to populate ListView in Windows Store javascript app, you can directly make changes on the datasource list and the changes will be shown on the ListView control automatically (no need to manually call the "notifyMutated" method). However, when you making changes to the datasource, you need to add/remove objects against the WinJS.Binding.List object(rather than the underlying javascript array you use to create the WinJS.Binding.List). For example:
Suppose I construct the following list as datasource of a ListView control:
function generateTestGroupedData() { var rawItems = [ { title: "Music Player", subTitle: "music player" }, { title: "Sun Glasses", subTitle: "sun glasses" }, { title: "Sports Bag", subTitle: "sports bag" }, { title: "T-Shirt", subTitle: "t-shirt" }, { title: "Laptop", subTitle: "laptop" }, { title: "Table", subTitle: "table" }, { title: "Chop Stick", subTitle: "chop stick" }, { title: "Motor", subTitle: "motor" }, { title: "Boat", subTitle: "boat" }, { title: "Flower Seeds", subTitle: "flower seeds" }, { title: "Red Wines", subTitle: "red wines" }, { title: "Chocalate", subTitle: "chocalate" } ]; ListViewPageUtils.rawProducts = rawItems; var list = new WinJS.Binding.List(rawItems); var groupedItems = list.createGrouped(getGroupKey, getGroupData, compareGroups); // Defined in global namespace via WinJS.Namespace.define ListViewPageUtils.productItems = groupedItems; // Bind datasource to ListView var lvHost = document.getElementById('lvGroupedData'); lvHost.winControl.itemDataSource = ListViewPageUtils.productItems.dataSource; lvHost.winControl.groupDataSource = ListViewPageUtils.productItems.groups.dataSource; }// For grouped data function compareGroups(lk, rk) { return lk.charCodeAt(0) - rk.charCodeAt(0); } function getGroupKey(dataItem) { return dataItem.title.toUpperCase().charAt(0); } function getGroupData(dataItem) { return { name: dataItem.title.toUpperCase().charAt(0) }; }then, I can just randomly add some new items into the datasource list (of WinJS.Binding.List type) I created before and the change will be reflected on ListView immediately (e.g.)
document.getElementById('btnAddDataRandom').addEventListener("click", function () { var randNum = Math.random() * 1000 % 26; var newCode = 'A'.charCodeAt(0) + randNum; var newTitle = String.fromCharCode(newCode, newCode, newCode); var newItem = { title: newTitle, subTitle: newTitle }; ListViewPageUtils.productItems.push(newItem); });You can also call "pop" or "splice" method to remove items directly from the WinJS.Binding.List object. Here are some references about databinding in Windows Store app with Html5 + js:
#Data Binding in a Windows Store App with JavaScript
http://msdn.microsoft.com/en-us/magazine/jj651576.aspx#Data binding (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh758311.aspx
这篇关于如何在不闪烁整个列表的情况下更新listview组头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
