1

私はJavascriptベースのWindows8Metroアプリに取り組んでいます。WinJS.UI.ListViewアイテムの1列のリストを表示するために使用します。ドキュメントで述べられていること以外はよくわかりません：http：//msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx。

データソースに基づいてリストアイテムのコンテンツをカスタマイズするにはどうすればよいですか？コールバック関数を使用できるので、リストアイテムごとに、データ配列内の対応するオブジェクトの変数に基づいて、特定のHTMLタグを表示/非表示にできますか？

このMSDNドキュメントの「例」セクションの配置と同様に、存在するかimgどうかに基づいてタグを表示/非表示にするにはどうすればよいですか？picture

その上、リストアイテムの高さを可変にするにはどうすればよいですか？上記の表示/非表示機能に基づいて、各リストアイテムの高さは異なります（実際には、すべてのアイテムで2つの異なる高さのみ）。この動作を実装する方法は？

ありがとうございました。

4

1 に答える 1

4

のリスト レイアウトは、高さが異なるアイテムをサポートしWinJS.UI.ListViewていません。1 つの特定の高さでなければなりません。そのレイアウトが必要な場合は、自分で作成する必要があります。データソースとアイテムの数に応じて、これは些細なことか難しいことです。:)

それは述べた：

  • リストビューは、アイテムごとに異なるテンプレートをサポートしています。プロパティを使用すると、itemTemplate関数を指定できます。詳細はこちら
  • グリッドレイアウトは、いくつかのプロパティと計算に基づいて、さまざまなサイズのアイテムをサポートします。詳細はこちら、最後に

小さなデータセット (<50) がある場合は、自分で要素を動的に作成し、 childdivの自然なフローを使用して要素を次々と積み重ねることができます。このソリューションの種は、私の回答here にあります。

VS の「空白」WWA プロジェクトに基づいて、コントロールの例を詳しく説明します。

このコードを に追加しますdefault.js。

WinJS.Namespace.define("Samples", {
    ItemsControl: WinJS.Class.define(function (element, options) {
        this.domElement = element;
        WinJS.UI.setOptions(this, options);
    }, {
        domElement: null,
        _dataSource: null,
        dataSource: {
            get: function () {
                return this._dataSource;
            },
            set: function (v) {
                this._dataSource = v;
                this._renderItems(v);
            }
        },
        pickTemplate: function (item) {
            // The tempalte is found in the WinJS.Binding.Template instances that are
            // in default.html. They have ID attributes on them. We're going to pick
            // which one we want by setting the ID we're looking for, and then getting
            // that element from the DOM and returning the winControl
            var templateId = "template1"
            if (item.isType2) {
                // Because this is "isType2", we're going to use the other template
                templateId = "template2";
            }

            return document.getElementById(templateId).winControl;
        },
        _renderItems: function (source) {
            // This function renders all the items, thus when you set the datasource, and
            // expect it to render items, you probably would like all your items to replace
            // any existing items.
            WinJS.Utilities.empty(this.domElement);
            source.forEach(function (item) {
                var newElement = document.createElement("div");
                this.domElement.appendChild(newElement);

                this.pickTemplate(item).render(item, newElement);
            }.bind(this));
        }
    }),
});

function makeContent() {
    var data = [
        { label: "First", },
        { label: "Second", },
        { label: "Third", isType2: true },
        { label: "Fourth", isType2: true },
        { label: "Fifth", },
        { label: "Sixth", isType2: true }
    ];

    var control = document.getElementById("itemsControl").winControl;

    control.dataSource = data;
}

の内容を次のように置き換えbodyます。

<div data-win-control="WinJS.Binding.Template"
    id="template1">
    <div class="type1"
        data-win-bind="textContent: label"></div>
</div>

<div data-win-control="WinJS.Binding.Template"
    id="template2">
    <div class="type2"
        data-win-bind="textContent: label"></div>
</div>
<button onclick="makeContent()">Make Content</button>
<div id="itemsControl"
    data-win-control="Samples.ItemsControl">

</div>

最後に、default.css で:

    .type1 {
        background-color: green;
        height: 50px;
        width: 100px;
    }

    .type2 {
        background-color: red;
        height: 100px;
        width: 100px;
    }
于 2013-02-02T21:02:04.763 に答える