WinJS-在项目更新时禁用ListView动画

我正在处理一个每2分钟刷新一次的列表视图。 listview使用多个模板（使用自定义itemTemplate函数分配）

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

但是，当我重新分配数据源时，会出现令人分心的闪烁动画。我想摆脱那个动画

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() });

---

为什么要重置数据？如果您使用多个模板，则在需要呈现项时会调用itemTemplate render函数——如果您更改了项并导致在基础数据集中添加或替换它，则listview可以对此作出反应，也可以调用项模板。这将比要求列表视图再次呈现所有数据（尤其是在ARM等低端设备上）性能更好

有关itemTemplate渲染函数的详细信息，请参阅“使用模板或渲染函数显示项目”一节

但是，如果这仍然不适用于您，您可以在列表视图中禁用动画，方法是处理“contentanimating”事件，并在引发事件对象时对其调用

preventDefault（）

。例如

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

---

如果您的代码比listview实例寿命长，请记住分离侦听器。

您可以随时使用

WinJS.UI.disableAnimations（）禁用动画，然后在重置完成后再次启用它们，基于
列表视图
加载状态
，如果允许我在替换时选择正确的模板，我还希望替换内容，而不是将新数据源分配给列表。正如你提到的，我尝试了默认的内容管理。它可以减少闪烁，但不能完全消除闪烁。我将发布我在帖子中使用的示例代码。通过操纵“列表”实例添加和删除所做更改将为您提供所需的内容。上面发布的代码位于XHR调用的成功处理程序中，该调用使用
setInterval
自动刷新。如果您不介意，可以发布操作列表实例的示例代码吗。这将非常有用。如果listview使用GridLayout，ContentAnMatting上的preventDefault将不起作用。