0

WinJS で FlipView コントロールを使用しようとしていて、いくつかの問題があります。それをデータソースにバインドし、フリップビュー コントロールのコンテンツ ペインに URL/画像プロパティを表示することはできますが、画像の読み込みに失敗します - 何か提案:(

画像タグの src プロパティが URL/picture プロパティを指していることを確認しました。通常の img タグを使用して画像を読み込むことができます。

以下に、テンプレートの定義とデータ ソースを示します。

情報源：

var dataArray = [
 { type: "item", title: "Hole 1", picture: "/images/IMG_0550.jpg" },
 { type: "item", title: "Hole 2", picture: "/images/IMG_0564.jpg" },
 { type: "item", title: "Hole 3", picture: "/images/IMG_0572.jpg" },
 { type: "item", title: "Hole 4", picture: "/images/IMG_0594.jpg" },
 { type: "item", title: "Hole 5", picture: "/images/IMG_0605.jpg" }
 ];

var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible. 
WinJS.Namespace.define("ImageData", {
    bindingList: dataList,
    array: dataArray
});

フリップビュー バインディング:

ここにギャラリーのコンテンツが入ります。

      <div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template">
        <div>
            <img src="#" data-win-bind="src: picture; alt: title" />
            <div>
                <h2 data-win-bind="innerText: title"></h2>
            </div>
        </div>
     </div>    

    <div id="basicFlipView" 
         data-win-control="WinJS.UI.FlipView"
         data-win-options="{ itemDataSource : ImageData.bindingList.dataSource, itemTemplate : simple_ItemTemplate }">
    </div>
  </section>
4

2 に答える 2

1

itemTemplate : select('#simple_ItemTemplate')`itemTemplate : simple_ItemTemplate' の代わりに使用

タイプミスを避けるためにコードにテンプレートとデータソースを設定することをお勧めします。また、コードをデバッグすることもできます。

basicFlipView.winControl.itemTemplate = simple_ItemTemplate;
basicFlipView.winControl.itemDataSource = dataList;
于 2013-04-07T05:22:29.397 に答える
0

私のPOV、データバインディング、およびMVVMから、私はankurのコメントに同意しません。あなたの質問について、プロジェクトを実行し、DOM エクスプローラーを使用して何が生成されるかを確認し、ID の代わりにクラスをテンプレート識別子として使用します (複数回生成されるため)。

于 2013-04-07T07:17:59.907 に答える