2012-06-22 12 views
21

Ich verwende knockoutjs und ich habe noch etwas in meiner Ansicht, die wie folgt aussieht:knockoutjs Element-ID durch Click-Ereignis erhalten

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

Dies ermöglicht es mir, die Element-ID in meiner Ansicht Modell zu erhalten:

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

Dies schreibt:

Element ID: # myTab1

Es ist jedoch zu repetitiv, um den Namen der img-ID im Click-Ereignis zu senden. Gibt es eine Möglichkeit, die Img-ID zu senden, ohne sie explizit neu zu schreiben?

+0

Below Link funktioniert für mich mit Knockout-Bindung http: // Stackoverflow .com/questions/31513689/knockout-to-get-the-Attributwert-onclick-function/31514589 # 31514589 –

Antwort

53

Sie können tatsächlich über einen KO-Klick-Handler auf das Ereignisobjekt zugreifen.

<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/

Hoffnung, das hilft.

+0

Genau das habe ich gebraucht. Danke vielmals! – bdev

+0

danke. Dies rettete mich vor ein paar Haare ziehen – solefald

+0

verpasste dies in den KO-Dokumenten. Danke – geedubb

13

Die Antwort von madcapnmckay ist nicht vollständig korrekt. Sie können currentTarget besser verwenden: Es wird das ursprüngliche gebundene Element anstelle eines untergeordneten Elements zurückgegeben, wenn Sie beispielsweise ein div mit verschachtelten Elementen haben.

dieses question

aktualisieren

Siehe Wie @ Ryan erwähnt - event.currentTarget für IE8 nicht verfügbar ist. Für < = IE8-Unterstützung können Sie:

var target = (event.currentTarget) ? event.currentTarget : event.srcElement; 
+0

Ich stimme zu. vm.yourFn = Funktion (Daten, event) { \t \t \t \t \t \t var $ target = $ (event.currentTarget) ... funktioniert super. – rball

+1

Bitte beachten Sie, dass currentTarget für diese Versionen nicht verfügbar ist, wenn Sie IE <9 unterstützen müssen. – Ryan

+0

Sie haben Recht. Ich habe die Antwort aktualisiert! –

1

Html Bindung

<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 Code

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