नॉकआउट - क्लिक किया तत्व

Question

हो रही है मैं निम्नलिखित मार्क-अप:

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

मैं क्लिक किया बटन के रूप में ही Div में वर्ग help साथ <p> की दृश्यता टॉगल करने के लिए चाहते हैं। मैं यह निर्धारित करने के लिए $ (यह) का उपयोग करने की कोशिश कर रहा हूं कि कौन सा बटन क्लिक किया गया था और फिर मैं वहां से सही "सहायता" तत्व प्राप्त कर सकता था।

समस्या यह है कि $(this) क्लिक किए गए बटन को वापस नहीं कर रहा है।

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

ko.applyBindings(viewModel); 

यह काम नहीं करता:

फिलहाल मैं बस क्लिक किया बटन को छिपाने के लिए की तरह कोशिश कर रहा हूँ। क्या कोई मदद कर सकता है?

Answer 1

यहाँ के बाद का उपयोग कर एक संभव समाधान के साथ एक jsFiddle है:

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

आप डोम तत्वों आप इस के माध्यम से चाहते हैं लक्षित कर सकते हैं वाक्यविन्यास:

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

Working example here

Answer 3

क्या उन divs नॉकआउट के माध्यम से निर्मित फ़ील्ड के अंदर हैं? (वे टेम्पलेट दिखते हैं)। यदि ऐसा है, तो मुझे लगता है कि इस पर पहुंचने के लिए एक और एमवीवीएमआईश तरीका बटन पर हैंडलर से वर्तमान में बाध्य आइटम निकालना होगा और उस हैंडलर द्वारा सेट किए गए दृश्य मॉडल प्रॉपर्टी में प्रत्येक सहायता पैराग्राफ की दृश्यता को बाध्य करने के बजाय, संबंधित आइटम पर सेट करना होगा प्रक्रियात्मक रूप से यूआई संचालन। कम से कम, यह वह पैटर्न है जिसे मैं आगे बढ़ रहा हूं और इसे बहुत अच्छी तरह से ढूंढ रहा हूं (विशेष रूप से डब्ल्यूपीएफ और सिल्वरलाइट में समान चीजों को करने के बाद)।

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