WinJS - 禁用的ListView动画项目时更新 [英] WinJS - Disable ListView animation when items update

问题描述

我的工作，其中获得刷新每2分钟一个ListView。
ListView中使用多个模板（使用定制的ItemTemplate指定功能）

由于我有在列表视图中的多个模板，我不能简单地更新使用dataSource.change功能的数据。
我必须重新设置数据源，以便根据最新数据，应该能够再次选择正确的模板。

但是，当我重​​新分配数据源发生了让人心烦的抖动动画。我想摆脱那个动画。

  VAR的ListView = element.querySelector（我的列表视图。'）WINCONTROL。
VAR名单=新WinJS.Binding.List（数据）;
listView.itemTemplate =功能（itemPromise）{
    返回itemPromise.then（函数（项目）{
        VAR容器=使用document.createElement（分区）;
        VAR的ItemTemplate;
        开关（item.data.status）{
            案最终：
                ItemTemplate中= element.querySelector（最后的模板。）;
                打破;            案NotFinal：
                ItemTemplate中= element.querySelector（不是决赛模板。）;
                打破;
        }        itemTemplate.winControl.render（item.data，集装箱）;
        container.style.height ='120像素';
        container.style.width ='380px';
        返回容器中;
    }）;
};
listView.itemDataSource = list.dataSource;
listView.addEventListener（contentanimating功能（五）{即preventDefault（）}）;
 

解决方案

为什么你需要重置的数据？如果您正在使用多个模板，您的ItemTemplate渲染函数被调用时，该项目需要呈现 - 如果你已经改变了该项目，并造成无以复加，或在基础数据集所取代，列表视图可以反应这可以叫你的项目模板。这将是比要求列表视图渲染的更高性能的所有您的数据再一次 - 尤其是在低端设备如ARM

有关一个ItemTemplate渲染功能的详细信息，请参见显示与模板项目或渲染功能的这里。

但是，如果这仍然不能为你工作，你可以通过处理contentanimating事件，并呼吁 preventDefault（）事件对象时，它的提高。例如。

  VAR myListview = / *获取ListView控件一些如何* /
myListView.addEventListener（contentanimating功能（五）{即preventDefault（）}）;
 

记住要拆下监听器，如果你的code为要长于ListView控件实例。

I am working on a ListView which get refreshed every 2 min. The listview uses multiple templates (assigned using custom itemTemplate function)

As I am having multiple templates in list view I cannot simply update the data using dataSource.change function. I have to reset the dataSource so that based on latest data it should be able to pick the correct template again.

But when I reassign the dataSource a distracting flicker animation occurs. I want to get rid of that animation.

var listView = element.querySelector('.my-list-view').winControl;
var list = new WinJS.Binding.List(data);
listView.itemTemplate = function (itemPromise) {
    return itemPromise.then(function (item) {
        var container = document.createElement("div");
        var itemTemplate;
        switch (item.data.status) {
            case "Final":
                itemTemplate = element.querySelector(".final-template");
                break;

            case "NotFinal":
                itemTemplate = element.querySelector(".not-final-template");
                break;
        }

        itemTemplate.winControl.render(item.data, container);
        container.style.height = '120px';
        container.style.width = '380px';
        return container;
    });
};
listView.itemDataSource = list.dataSource;
listView.addEventListener("contentanimating", function (e) { e.preventDefault() });

解决方案

Why do you have to reset the data? If you are using multiple templates, your itemTemplate render function is called when the item needs to be rendered -- and if you've changed the item and cause it to be added, or replaced in the underlying data set, the listview can react to this can call your item template. This will be much more performant than asking the list view to render all your data again -- especially on low end devices such as ARM.

For details on an itemTemplate render function, see the section 'Displaying items with a Template or render function' here.

However, if this still doesn't work for you, you can disable animations in the list view by handling the "contentanimating" event, and calling preventDefault() on the event object when it's raised. E.g.

var myListview = /* get listview control some how */
myListView.addEventListener("contentanimating", function(e) { e.preventDefault() });

Remember to detach the listener if your code is longer lived than the listview instance.

这篇关于WinJS - 禁用的ListView动画项目时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！