Knockout - Primeros elemento

Question

clic tengo el siguiente margen de ganancia:

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

Quiero cambiar la visibilidad de la del <p> con la clase help en la misma Div que el botón se hace clic. Estoy tratando de usar $ (esto) para determinar en qué botón se hizo clic y luego pude obtener el elemento de "ayuda" correcto desde allí.

El problema es que $(this) no devuelve el botón presionado.

Por el momento estoy tratando de simplemente ocultar el botón de clic como:

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

ko.applyBindings(viewModel); 

Esto no funciona. ¿Alguien puede ayudar, por favor?

Answer 1

Aquí está una jsFiddle con una posible solución:

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

Puede orientar los elementos DOM que desee a través de este sintaxis:

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

Answer 2

trate de usar event.currentTarget seguido por next()

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

Working example here

Answer 3

¿Están esos divs dentro del fieldset construidos mediante Knockout? (se ven modelos). Si es así, creo que una forma más de MVVMish de abordar esto sería extraer el elemento actualmente vinculado del controlador de clic de botón y vincular la visibilidad de cada párrafo de ayuda a una propiedad de modelo de vista establecida por ese controlador en el elemento correspondiente, en lugar de hacerlo las operaciones de la interfaz de usuario procedimentalmente. Al menos, este es el patrón al que me he estado moviendo y me resulta mucho más agradable (especialmente después de hacer cosas similares en WPF y 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);