0

次のような HTML 定義のテンプレートを使用していた ListView があります。

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div>

        <!-- Displays the "picture" field. -->
        <img data-win-bind="alt: title; src: picture" />
        <div>

            <!-- Displays the "title" field. -->
            <h4 data-win-bind="innerText: title"></h4>

            <!-- Displays the "text" field. --> 
            <h6 data-win-bind="innerText: description"></h6>
        </div>
    </div>
</div>

<div id="basicListView" data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
</div>

リスト アイテムが変更されると、アイテム テンプレートが更新されて変更が反映されます。ただし、必要に応じて、javaScript 関数を使用してテンプレートを作成するように変更する必要がありました。サンプル サイトにあるコードをモデルにして、コードを作成しました。

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll().then(function () {
            var lView = document.getElementById("templateFunctionListView").winControl;
            lView.itemTemplate = itemTemplateFunction;

        }));

    }
};

function itemTemplateFunction(itemPromise) {

   return itemPromise.then(function (item) {
       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;
   });
};

JavaScript 関数に変更した後、バインド データが変更されても、表示項目が変更されません。

それらを更新するにはどうすればよいですか?

4

2 に答える 2

4

あなたのために働くことができる2つのアプローチがあると思います。

私の場合、アプリのデータを更新すると、1 つ以上のエンティティが完全に古くなり、新しいエンティティが表示される可能性があります。したがって、次のように ListView のバインディングを再設定するだけです。

listView.itemDataSource = Data.items.dataSource;

ここで、Data は、すべてのデータ関数とオブジェクトを含めるために data.js で設定した名前空間です。

itemDataSource プロパティの値を更新すると、ListView は新しいデータに再バインドされ、正しい項目が表示されます。

データが一度に 1 つのプロパティのみ更新されている場合は、WinJS.Binding.as 関数を使用してバインディング リスト内の項目を監視可能にすることも確認する必要があります。

http://msdn.microsoft.com/en-us/library/windows/apps/hh781224.aspx#updating_changeing_records

まだ見ていない場合は、ここにデータバインディングに関するいくつかの良い情報があります:

http://msdn.microsoft.com/en-us/library/windows/apps/hh758311.aspx

また、次の MSDN フォーラム スレッドが参考になるかもしれません。

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/21b9603f-e28d-4c93-b164-a2c91ba5c4ca

上記がお役に立てば幸いです！

Windows ストア アプリ開発の詳細については、App Builderに登録してください。

于 2013-03-17T17:06:31.010 に答える
0

データ セット全体を再バインドする代わりに、単一の項目を再バインドできます。リスト内のアイテムの位置を見つけて、スプライスしてそれ自体に置き換えます。

for (var i = 0; i < list.length; i++){
  item = list.getAt(i);
  if (item.key == itemToBeReBound.key){
    list.splice(i, 1, item);
    i = list.length;
  }
}
于 2014-01-28T19:45:08.843 に答える