नॉकआउट फायरिंग लागू करने पर बाध्यकारी क्लिक करें बाइंडिंग

Question

हाल ही में मैंने व्यूमोडेल को एक अलग जावास्क्रिप्ट फ़ाइल में अलग कर दिया है।

var Report = (function($) { 
    var initialData = []; 
    var viewModel = { 
     reports: ko.observableArray(initialData), 
     preview: function(path) { 
      // preview report 
     }, 
     otherFunctions: function() {} 
    }; 
    return viewModel; 
})(jQuery);​ 

यहाँ HTML और नॉकआउट संबंधित कोड

<script type="text/javascript" src="path/to/report/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     ko.applyBindings(Report, document.body); 
    }); 
</script> 

एचटीएमएल यूजर इंटरफेस एक बटन है, जिस पर क्लिक दृश्य मॉडल

<input type="button" name="Preview" id="Preview" class="btnPreview" 
    data-bind="click: Report.preview('url/to/report')" /> 

समस्या में पूर्वावलोकन समारोह के लिए डेटा बाँध है पूर्वावलोकन विधि को कॉल किया जाता है जब निम्न पंक्ति $ (दस्तावेज़) में निष्पादित होती है .ready() फ़ंक्शन

ko.applyBindings(Report, document.body); 

पूर्वावलोकन बटन पूर्वावलोकन फ़ंक्शन पर क्लिक किए बिना उपयोगकर्ता को निकाल दिया जाता है। इस व्यवहार का कारण क्या हो सकता है? जब मैं HTML पृष्ठ में मॉडल जावास्क्रिप्ट को देखता हूं तो पूरी चीजें ठीक काम कर रही थीं।

Answer 1

कारण यह है कि आप वास्तव में पूर्वावलोकन फ़ंक्शन का आह्वान कर रहे हैं (क्योंकि functionName लिखने का अर्थ है फ़ंक्शन का जिक्र करना, functionName() लिखना इसका मतलब है)।

तो data-bind="click: Report.preview" अपेक्षित के रूप में काम करेगा, लेकिन पैरामीटर को सौंपे बिना।

the manual के रूप में राज्यों (एक अलग विषय पर, लेकिन यह अभी भी लागू होता है):

आप अधिक पैरामीटर भेजने की जरूरत है, एक तरह से यह करने के लिए एक समारोह शाब्दिक कि में ले जाता है में अपने हैंडलर लपेटकर है इस उदाहरण में एक पैरामीटर,:

<button data-bind="click: function(data, event) { myFunction(data, event, 'param1', 'param2') }"> 
    Click me 
</button> 

या अपने मामले में:

data-bind="click: function() { Report.preview('url/to/report') }" 

एक अन्य समाधान (एक समारोह (काफी एक ही बात वास्तव में) लौट पूर्वावलोकन करने के लिए) होगा:

preview: function(path) { 
    return function() { 
     // ... 
    } 
} 

Answer 2

एक अन्य समाधान का उपयोग करने के लिए है 'बाँध' का निर्माण:

data-bind="click: Report.preview.bind($data, 'url/to/report')" 

जहां पहले बाध्य करने के लिए पैरामीटर() कॉल किए गए फ़ंक्शन में 'यह' बन जाएगा।