1

私が抱えているこの問題の言い方がよくわからないので、これが理にかなっていることを願っています。

リストビューを作成し、すべてのデータバインディングを設定し、テンプレートなどを作成したので、データが適切に表示されますが、表示する各リストビュータイルの要素の1つは、ライブの時を刻む時計です。問題は、リストビュー全体を再描画せずに、すべてのリストビューオブジェクトを更新するにはどうすればよいかということです。

私が現在持っている唯一の有効な方法は、表示したい時間で毎秒それにバインドされたデータを更新することです。これは機能しますが、リストビュー全体を再描画します。これは高価で、アニメーションをトリガーします（キャンセルすることはできますが、アニメーション開始イベントを完全にリッスンすることはできません）

ありがとう！

4

2 に答える 2

0

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;

            }
        })
    };
于 2012-11-15T22:25:22.203 に答える
0

データオブジェクトへのアクセスが与えられると（これを実行したいときにまだ持っていると思います）、次のようなテンプレートがあります。

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

アイテムの時計を変更したい時点で、アイテムを調べてtimestampプロパティを更新すると、リストビューが更新されます。例えば

var item = getItemToUpdateFromSomewhere();
item.timestmap = "2 O'clock";
于 2012-11-16T00:16:29.337 に答える