Nakavt - eleman

Question

tıklandığında Başlarken Ben şu 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> 

Tıkladım'ı düğmesiyle aynı Div sınıf help ile <p> görünürlüğünü değiştirmek istiyorum. Hangi düğmenin tıklandığını belirlemek için $ (this) kullanmaya çalışıyorum ve oradan doğru "yardım" elemanını alabiliyorum.

Sorun şu ki, $(this) tıklanan düğmeyi geri göndermiyor.

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

ko.applyBindings(viewModel); 

Bu işe yaramazsa: Şu anda

ben gibi sadece tıklanan düğmeye saklamaya çalışıyorum. Birisi yardım edebilir mi lütfen?

Answer 1

takip kullanarak deneyin olası bir çözüm ile bir jsFiddle geçerli:

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

Sen bu aracılığıyla istediğiniz DOM öğelerini hedefleyebilir sözdizimi:

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

Answer 2

event.currentTargetnext()

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

İşte

Working example here

Answer 3

Knockout aracılığıyla oluşturulan alanın içindeki div'ler mi? (templateye bakarlar). Eğer öyleyse, buna yaklaşmak için daha fazla MVVMish yolu, şu anda bağlı olan öğeyi düğme tıklatma işleyicisinden ayıklamak ve her yardım paragrafının görünürlüğünü, bu işleyici tarafından ilgili öğeye göre ayarlanmış bir görünüm model özelliğine bağlamaktır. UI işlemleri prosedürel olarak. En azından, bu, benim ilerlediğim ve daha hoş bulduğum model (özellikle WPF ve Silverlight'ta benzer şeyler yaptıktan sonra).

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