windows-8 - Windows 8のリストビュー（WinJS）の動的テンプレート

Question

リストレイアウトに単純なリストビューを備えたWindows8アプリケーションがあります。ブログアイテム（シンジケーション）を取得しました。今、達成したいのは、「さらにロード」ボタンとして機能する動的アイテムを追加することです。これを行うには、このアイテム専用に別のテンプレートを指定します。私が見つけたサンプルは関数テンプレートを使用していますが、JavaScriptを使用してすべてのテンプレート要素をロードする必要があるため、実際にはあまり用途が広くありません。itemプロパティに基づいてWinJS.Binding.Templateを動的に指定する方法はありますか？

Answer 1

このテーマに関する優れた記事

http://stephenwalther.com/blog/archive/2012/05/23/metro-dynamically-switching-templates-with-a-winjs-listview.aspx

Answer 2

私は実際に以前に同じ問題を抱えていました。この問題を処理する方法は次のとおりです。

function listItemTemplateRenderer(item) {

    //Get data from item.
    var data = item._value.data;

    // if it is a special item renderer, apply special template
    if (data.isSpecialItem) {
        return specialItemRenderer(data);
    }

    var itemElement = document.createElement('div');
    itemElement.className = "listItemTemplate";

    var placeHolder = document.createElement('div');
    placeHolder.className = "itemTemplateClass";
    placeHolder.id = data.id;

    var itemDetail = document.createElement('div');
    itemDetail.className = "itemDetailStyle";

    ... //whatever you wanna add to your template

    //Append child elements
    placeHolder.appendChild(itemDetail);
    itemElement.appendChild(placeHolder);

    return {
        element: itemElement
    };
}

// Template for the special item
function messageItemRenderer(item) {

    var itemElement = document.createElement('div');
    itemElement.className = "listItemTemplat";

    var placeHolder = document.createElement('div');
    placeHolder.className = "specialItemTemplate";
    placeHolder.id = item.id;

    var dataText = document.createElement('div');
    dataText.className = "dataText";
    dataText.innerText = item.text;
    placeHolder.appendChild(dataText);

    itemElement.appendChild(placeHolder);

    itemElement.onclick = item.clickHandler;

    return {
        element: itemElement
    };
}

お役に立てれば。

Answer 3

このチュートリアルの最後の部分「関数を使用してアイテムを表示する」が役立つと思います。関数内で、リストにあるアイテムを判別し、別のテンプレートをレンダリングできます。HTMLファイルからさまざまなテンプレートをロードすることも可能です。

もう1つのオプションは、pagesToLoadプロパティをautomaticallyLoadPagesプロパティと組み合わせて使用​​することです。これにより、ユーザーがリストボックスの最後までスクロールすると、新しいアイテムの読み込みが自動的に開始されます。