Knockout - Getting cliccato elemento

Question

Ho la seguente mark-up:

<fieldset> 
    <div> 
     <label class="editor-label">Question 1?</label> 
     <input type="text" class="editor-field" />  
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
    <div> 
     <label class="editor-label">Question 2?</label> 
     <input type="text" class="editor-field" /> 
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
    <div> 
     <label class="editor-label">Question 3?</label> 
     <input type="text" class="editor-field" /> 
     <button type="button" data-bind="click: helpClicked">Help</button> 
     <p class="help">Help 3</p> 
    </div> 
</fieldset> 

voglio commutare la visibilità del l'<p> con la classe help nella stessa Div del pulsante cliccato. Sto cercando di usare $ (this) per determinare quale pulsante è stato cliccato e quindi ho potuto ottenere l'elemento "help" corretto da lì.

Il problema è che $(this) non restituisce il pulsante su cui si fa clic.

Al momento sto cercando di nascondere semplicemente il pulsante cliccato come:

var viewModel = { 
    helpClicked: function() { 
     $(this).hide();   
    } 
}; 

ko.applyBindings(viewModel); 

Questo non funziona. Qualcuno può aiutare, per favore?

Answer 1

Ecco un jsFiddle con una sola possibile soluzione:

http://jsfiddle.net/unklefolk/399MF/1/

È possibile indirizzare gli elementi DOM desiderati tramite questo sintassi:

var viewModel = {  
    helpClicked: function (item, event) { 
     $(event.target).hide(); 
     $(event.target).next(".help").show()    
    } 
}; 
ko.applyBindings(viewModel); ​ 

Answer 2

provare a utilizzare event.currentTarget seguito da next()

$(event.currentTarget).next().hide(); 

Working example here

Answer 3

Sono quelle div all'interno del fieldset costruito tramite Knockout? (Sembrano modellati). Se è così, penso che un altro modo MVVMish per avvicinarsi a questo sarebbe quello di estrarre l'elemento attualmente associato dal gestore di clic del pulsante e associare la visibilità di ciascun paragrafo di aiuto a una proprietà del modello di vista impostata da quel gestore sull'elemento corrispondente, piuttosto che fare le operazioni dell'interfaccia utente proceduralmente. Almeno, questo è lo schema che ho scelto e lo trovo molto più bello (specialmente dopo aver fatto cose simili in WPF e Silverlight).

Answer 4

This should work 

var viewModel = 
{ 
     helpClicked: function (data,element) { 
     /* 
     data is the current model passed to the button 
     element is the button currently interacting with 
    but to get the dom object equivalent of the 
    element you've to access it   
    via its currentTarget property 
    */ 
     $(element.currentTarget).hide();   
    } 
}; 

ko.applyBindings(viewModel);