Question

我不太确定如何解释这个问题，所以我希望这是有道理的。

我想创建一个列表视图，并设置了所有数据绑定并创建了一个模板等，因此它很好地显示了数据，但我展示的每个listview图块上的一个元素是一个实时滴答时钟。问题是如何在不重新绘制整个列表视图的情况下更新所有listview对象。

我目前唯一的工作方法是每秒更新绑定到它的数据，我希望显示的时间有效，但它会重新绘制整个列表视图。这是昂贵的，并触发动画（可以取消，但不完全听动画启动事件）

谢谢！

Answer 1

一种方法是为列表视图使用JavaScript模板。正常情况下将数据绑定到列表视图，但将属性添加到名为clock的数据模型中。对于要渲染时钟的数据项，将其值设置为true。不是在HTML中定义模板，而是在JavaScript中定义模板（您可以在此处查看如何执行此操作 - http://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx）然后，您可以在JavaScript模板中添加一些逻辑，以确定磁贴是否应该是基于时钟的时钟绑定属性，如果它是创建时钟模板：

function itemTemplateFunction(itemPromise) {

        return itemPromise.then(function (item) {

            if (item.data.clock == true) {
                //TODO: Append HTML and JS for your clock object
                //TODO: Perhaps set up a setInterval timer to tick your clock along.

            }
            else {
                //TODO Add the regular template Code, example below
                var div = document.createElement("div");

                var img = document.createElement("img");
                img.src = item.data.picture;
                img.alt = item.data.title;
                div.appendChild(img);

                var childDiv = document.createElement("div");

                var title = document.createElement("h4");
                title.innerText = item.data.title;
                childDiv.appendChild(title);

                var desc = document.createElement("h6");
                desc.innerText = item.data.text;
                childDiv.appendChild(desc);

                div.appendChild(childDiv);

                return div;

            }
        })
    };

Answer 2

鉴于您对数据对象的访问权限（我假设您在此时仍然拥有这些对象），可以使用以下模板：

<div data-win-control="WinJS.Binding.Template" id="yourTemplate">
    <div data-win-bind="textContent: timestamp"></div>
</div>

在您希望更改项目时钟的位置，浏览它们并更新timestamp属性，列表视图将更新。 E.g。

var item = getItemToUpdateFromSomewhere();
item.timestmap = "2 O'clock";

WinJS - 对列表视图的不断更新

2 个答案: