web-dev-qa-db-ja.com

knockoutjsはクリックイベントを通じて要素IDを取得します

私はknockoutjsを使用していて、現在、次のようなものを持っています:

<img id="myTab1" data-bind="click: pressedTab.bind($data, '#myTab1')" src="images/image1.png"></img>

これにより、ビューモデルの要素IDを取得できます。

pressedTab = function(tab){
    console.log("Element ID: " + tab);
}

これは書いています:

要素ID:#myTab1

ただし、クリックイベントでimg idの名前を送信するのは繰り返しが多すぎます。明示的に書き換えずにimg idを送信する方法はありますか?

21
bdev

実際には、KOクリックハンドラーを介してイベントオブジェクトにアクセスできます。

<button id="somebutton" data-bind="click: log">Click Me </button>

var ViewModel = function() {
    this.log = function(data, event) {
        console.log("you clicked " + event.target.id);
    }
};
ko.applyBindings(new ViewModel());

http://jsfiddle.net/madcapnmckay/e8JPT/

お役に立てれば。

55
madcapnmckay

Madcapnmckayの答えは完全に正しくはありません。 currentTargetを使用することをお勧めします。ネストされた要素を持つdivがある場合、子要素ではなく元のバインドされた要素を返します。

これを見てください 質問

更新

@Ryanが言及したように、event.currentTargetはIE8では使用できません。 IE8以下のサポートの場合は、次を使用できます。

var target = (event.currentTarget) ? event.currentTarget : event.srcElement;
13
Dirk Boer

HTMLバインディング

 <input type="checkbox" data-bind="attr:{id: $data.Id , Qref: '3177'} , click: $root.answerClick">&nbsp;&nbsp;&nbsp;<span data-bind="text: $data.Text , attr:{id: $data.Id}"></span>

jsコード

answerClick: function(c, event){
        var element = event.target;
        var qref = element.getAttribute('Qref');
        var click_id = element.id;
        return true;
    }
1
San Jaisy