1

-- 始める前に、ライブラリなしでこれを達成しようとしていると言わなければなりません。申し訳ありませんjQuery--

一般的な意味で、リスト内のアイテムに一意のクラス名または ID がない場合に、リストでイベント リスナーを使用する最善の方法を考えています。より具体的には、私はこれを持っています：

現在、このガイドのようにデータバインドされた WinJS listView があります。ご覧のとおり、リスト内の項目には一意の要素 ID またはクラス名がありません。リスト内の特定のアイテムをクリックすると、この動作が発生するように、それぞれにクリックリスナーを追加したいので、これが問題を引き起こしています(gifに示すように)。リスト内の適切な項目に対応するリスト内の項目の下にサブメニューを表示する必要があります。

それらがすべて一意の ID やクラス名を持っていれば、これは簡単です。しかし、そうではないので、誰かがアイテムをクリックしたときに、それがどれであるかを取得し、クリックしたアイテムの下にあるリスト内のすべてのアイテムにクラス名を追加して、を使用して下に移動できるようにする必要があると考えていましたWinJS .createExpandAnimation 関数。次に、サブメニューを閉じたら、追加されたすべてのクラス名を取り除きます。それは本当にそれを行うための最良の方法ですか？

listView を完全に削除することはできますが、同様の方法でデータ バインドする方法が必要です。listView (または別のライブラリ) を使用せずにこれを行う方法はありますか?

編集: 私のコードは、Microsoft がウォークスルーで提供するものと同じ形式です。

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width: 150px; height: 100px;">

        <!-- Displays the "picture" field. -->
        <img src="#" style="width: 60px; height: 60px;" 
             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: text"></h6>
        </div>
    </div>
</div>       

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

dataSource は次のように定義されます。

 (function () {
"use strict";

var dataArray = [
{ title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" }
];

var dataList = new WinJS.Binding.List(dataArray);

// Create a namespace to make the data publicly
// accessible. 
var publicMembers =
    {
        itemList: dataList 
    };
WinJS.Namespace.define("DataExample", publicMembers);

正直なところ、これが WinJS listView で機能するかどうかさえわからないので、html リストなどを使用するには、これを完全に変更する必要があるかもしれません。

4

1 に答える 1

0

oniteminvokedイベント ( http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx ) を使用して、ListView アイテムのクリックを処理できます。クリックされたアイテムは、イベント ハンドラーのパラメータ。

その値をどうするかはあなた次第です。これを使用して、ListView に項目を挿入したり、呼び出された項目に非表示の要素を表示したりします。

于 2013-07-16T20:55:52.630 に答える