2

まず、マークアップでdata-win-bind属性を使用するときに設定できるプロパティのリストはありますか？

私がやろうとしているいくつかのこと：

  1. データソースに基づいてクラス名を条件付きで追加します。
  2. マークアップ内でイベントリスナーを宣言します。これらのイベントリスナーは、グローバル関数ではなく、データソースに存在する必要があります。
4

2 に答える 2

6

バインドできるプロパティのセットは2つあります。

1つ目は、各要素タイプによってDOMでサポートされるプロパティです。したがって、imgたとえば要素の場合、srcプロパティをバインドして、表示される画像を設定できます。要素の場合、プロパティinputにバインドできvalueます。Metroアプリで使用できるHTML要素の完全なリストはこちらで確認できます。

WinJS UIコントロールを要素に適用した場合は、2番目のプロパティセットを使用できます（通常は属性を使用して行われます。コントロールが適用されたときに追加されるプロパティをdata-win-control介して、各コントロールによって定義されたプロパティを設定できます。たとえば、プロパティをでwinControlバインドする場合は、次のようなマークアップがあります。itemTemplateListView

<div id="list" data-win-control="WinJS.UI.ListView"
    data-win-bind="winControl.itemTemplate: myValue"></div>

同じ手法を使用して、イベントハンドラーを設定できます。次のように、データソースの一部としてコールバック関数を定義します。

var dataSource = {
    myClickHandler: function (e) { console.log("Click!") }
}

on*次に、関心のあるイベントに対応するプロパティにバインドします。

<button data-win-bind="onclick: myClickHandler">Press Me</button>

個々のクラスの追加と削除は非常に注意が必要です。それを行う最も簡単な方法は、コードベースのバインディングを使用することです。次のように、データソースに監視可能なプロパティを作成します。

var dataSource = {
    myClickHandler: function (e) { console.log("Click") },
    classes: WinJS.Binding.as({
        myFirstClass: true,
        mySecondClass: false,
    })
}

次に、次のように、監視可能なオブジェクトのbindメソッドを使用して、値が変更されたときに通知を受け取り、クラスを適用/削除します。

dataSource.classes.bind("myFirstClass", function (newValue) {
    var elem = document.getElementById("myId");
    if (newValue) {
        WinJS.Utilities.addClass(elem, "myFirstClass");
    } else {
        WinJS.Utilities.removeClass(elem, "myFirstClass");
    }
});

クラスを宣言的にバインドすることはできますが、すべてのクラスを一度に設定する必要があります。これがそれほど役立つことはめったにありません。そのアプローチを実行したい場合はclassName、要素のプロパティをバインドします。

于 2012-06-12T08:06:54.300 に答える
0

データバインディングを介して、要素に任意のjavascriptプロパティを設定できます。したがって、javascriptプロパティとして公開されているもの（基本的には、aria-attributesを除くすべて）を設定できます。

classNameプロパティを設定することはできますが、バインディングを使用して追加することはできないため、クラス名を追加するのは少し注意が必要です。ただし、すべてのクラス名を1つの文字列に含めることができます。

たとえば、onclick属性を常に設定するコードがあります。データソースの一部として関数を含めると、設定が完了します。

于 2012-06-11T16:48:31.423 に答える