2012-12-10 19 views
10

में माता-पिता समारोह के लिए बाध्य क्लिक करें मैं निम्न HTML है:foreach

var viewModel = ko.mapping.fromJS({"Selected":null,"Contacts":[]}); 
viewModel.AddContacts = function(){ 
    this.Contacts([{"Name":"C1"},{"Name":"C2"}]); 
} 

viewModel.Foo = function (contact) { 
    alert(contact.Name); 
} 

ko.applyBindings(viewModel); 

जब मैं बटन फू प्रत्येक संपर्क के लिए कहा जाता है पर क्लिक करें:

<div data-bind="foreach: Contacts"> 
    <a data-bind="click: $parent.Foo($data), text: Name">link</a> 
</div> 
<button data-bind="click: AddContacts">click</button> 

और जे एस कोड। जब तक कि किसी भी लिंक पर क्लिक नहीं किया जाता तब तक मुझे यह बिल्कुल कॉल करने की उम्मीद नहीं थी।

उत्तर

16

nemesv ने कहा। पैरामीटर एक फ़ंक्शन संदर्भ है। तो आप क्या कर रहे थे फ़ंक्शन के परिणाम को क्लिक ईवेंट के रूप में उपयोग कर रहा था।

अपने कार्य करने के लिए कॉल है कि आप भेज देंगे ताकि आप इसे मैन्युअल रूप से पारित करने की जरूरत नहीं है कि आइटम के लिए डेटा स्वतः शामिल हो जाएगी:

<div data-bind="foreach: Contacts"> 
    <a data-bind="click: $parent.Foo, text: Name">link</a> 
</div> 

http://jsfiddle.net/4cUv9/

+13

चेतावनी: इसके बाद के संस्करण कोड के साथ, फू में(), "यह" चर * दृश्य * नहीं होगा। यह उदाहरण काम करता है क्योंकि "यह" फ़ू में उपयोग नहीं किया जाता है। "यह" सही होने के लिए आप "क्लिक करें: $ parent.Foo.bind ($ parent)"। Http://jsfiddle.net/4cUv9/ देखें – pettys

8

click बाइंडिंग पैरामीटर एक फ़ंक्शन संदर्भ है। तो तुम एक गुमनाम समारोह में अपने कॉल रैप करने के लिए की जरूरत है:

<div data-bind="foreach: Contacts"> 
    <a data-bind="click: function() { $parent.Foo($data); }, text: Name">link</a> 
</div> 

तो तुम बंधन आप इसे रैप करने के लिए एक समारोह बनाने की जरूरत है अपने click में अतिरिक्त तर्क पारित करने के लिए चाहते हैं। click documentation

<button data-bind="click: AddContacts"> अभिव्यक्ति काम कर रही है क्योंकि आप सीधे AddContacts फ़ंक्शन का संदर्भ दे रहे हैं।