jquery क्लिक घटना नॉकआउट

Question

का उपयोग करते समय फायरिंग नहीं है knockout click binding documentation's "Note 3" के अनुसार, नॉकआउट डिफ़ॉल्ट फ़ंक्शन निष्पादित करने से क्लिक ईवेंट को रोकता है। इस व्यवहार को ओवरराइड करने के लिए, मुझे बस अपने हैंडलर फ़ंक्शन से सच करना है।

<div data-bind="visible:Pages().length == 0"> 
    <div class="alert alert-info">Click "Parse" button.</div> 
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button> 
</div> 

अब, मैं इस तरह बटन के लिए क्लिक करें घटना अनुलग्न करना चाहते हैं:

$(function() {  
    $('#btnParse').on('click', function() { alert('clicked'); return true;}); 
}); 

ध्यान दें कि मैं समारोह से सच लौट रहा हूँ तो, मैं इस मार्कअप है। यह भी हैंडलर कभी आग नहीं करता है। मै इसे काम मे कैसे ले सकता हूँ?

Answer 1

क्लिक बाध्यकारी के लिए संदर्भित नोट आपके व्यूमोडेल में विधि को संदर्भित करता है, न कि आपके कस्टम क्लिक हैंडलर पर।

दूसरे शब्दों में, यदि आप <button> तत्व में एक data-bind="click: doSomething" है, तो अपने viewmodel में doSomething() विधि सच लौटना चाहिए अगर आप इसे अपने कस्टम हैंडलर निष्पादित करने के लिए चाहते हैं।

Answer 2

मेरी स्थिति में मैं एक अवलोकन योग्य के साथ काम कर रहा था जिसे उस सरणी में प्रत्येक आइटम पर लागू कुछ jQuery जादू की आवश्यकता होती है। मुझे कस्टम बाध्यकारी के साथ कुछ समस्याएं थीं जो उस सरणी में प्रत्येक आइटम से दो varibles नहीं लेना चाहती थीं। तो, मेरे पैकेजिंग में मैंने उस अंधेरे मैनाजिक को एक गैर-देखने योग्य आइटम में एक समारोह के रूप में जोड़ा ताकि जब नाम बढ़ गया था, तो जिस मानचित्र पर मैं काम कर रहा था वह उस स्थान पर चलेगा।

HTML:

<ul data-bind="foreach: filteredItems"> 
    <li class="seat"> 
     <span class="name" data-bind="text:fullName, click: toggleEmp"></span> 
    </li> 
</ul> 

कोड:

function viewModel() { 
    var vm = this; 
    vm.empData = function(data) { 
     var emp = this; 
     emp.office_x_loc = ko.observable(data.xLoc); 
     emp.office_y_loc = ko.observable(data.yLoc); 
     emp.toggleEmp = function() { 
      jQuery('#skyLineMap').lhpMegaImgViewer('setPosition', emp.office_x_loc(),emp.office_y_loc(), 0.8, false); 
    };//*/ 
}//*/ 

मुझे आशा है कि इस मदद करता है

Answer 3

मुझे लगता है कि समस्या डोम जहां बाध्य करने के लिए कोशिश कर रहे हैं के नॉक आउट के संशोधन के साथ क्या करना है घटना। इसे पाने के लिए, क्लिक फ़ंक्शन को पैरेंट <div> तत्व पर असाइन करने का प्रयास करें। क्लिक हैंडलर को असाइन करते समय, चयनकर्ता के साथ ओवरलोड का उपयोग यह निर्दिष्ट करने के लिए करें कि आप केवल उस बटन को क्लिक करना चाहते हैं जब निहित बटन क्लिक किया गया हो। उदाहरण के लिए, इस तरह div बदलने के लिए:

<div id="btnContainer" data-bind="visible:Pages().length == 0"> 
    <div class="alert alert-info">Click "Parse" button.</div> 
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button> 
</div> 

और फिर करने के लिए अपनी स्क्रिप्ट बदलने के लिए:

$(function() {  
    $('#btnContainer').on('click', '#btnParse', function() { alert('clicked');}); 
}); 

ध्यान दें कि यह <div> एक और तार्किक ब्लॉक कि डोम, (एक टेम्पलेट, foreach को संशोधित करता है के भीतर निहित है, तो लूप, इत्यादि), आपको शायद #btnContainer टैग <button> के पहले पूर्वजों को टैग करने की आवश्यकता होगी जो कि इस तरह के लॉजिकल ब्लॉक का हिस्सा नहीं है।

Answer 4

आपके क्लिक हैंडलर कभी भी फायरिंग नहीं कर रहा है क्योंकि यह आपके तत्व पर कभी भी लागू नहीं होता है। तो जब आप jQuery में ऐसा करते हैं: हैंडलर के लिए फिर

$('.some-class').on('some-event', someFunction); 

कि इस घटना के लिए बाध्य होने के लिए, पहली jQuery अपने $('.some-class') चयनकर्ता को खोजने के लिए है। आपके मामले में, जब आप घटना को बाध्य करते हैं तो #btnParse को पृष्ठ पर अभी तक नॉकआउट द्वारा प्रस्तुत नहीं किया जाता है। या, यह भी संभव है कि मूल तत्व प्रदान किया जाता है, नष्ट हो जाता है, और फिर दूसरा तत्व प्रस्तुत किया जाता है। इस दूसरे परिदृश्य में, ईवेंट हैंडलर बटन पर नहीं रहेगा।एक वैकल्पिक (जो मैं अनुशंसा नहीं करते) हैंडलर उच्च document स्तर पर डोम में बाध्य करने के लिए, की तरह है, और केवल करने के लिए फिल्टर की घटनाओं एक आईडी #btnParse के साथ कुछ में से जो:

$(document).on('click', '#btnParse', function() { console.log('hi'); }); 

कारण मैं इसकी अनुशंसा न करें क्योंकि यह खराब नॉकआउट अभ्यास है, आपको click बाइंडिंग का उपयोग कुछ अन्य पोस्ट सुझाए जाने के रूप में करना चाहिए। साथ ही, आप एक आईडी विशेषता का उपयोग कर रहे हैं और यह वास्तव में टेम्पलेटेड गतिशील सामग्री के लिए सामान्य रूप से एक अच्छा विचार नहीं है - केवल कक्षाओं का उपयोग करें जब तक कि आपको एक अद्वितीय स्थिर तत्व के लिए बिल्कुल आईडी की आवश्यकता न हो।

नॉकआउट के क्लिक बाध्यकारी का सही तरीके से उपयोग करने के तरीके के रूप में, एक मुश्किल बात यह है कि आपको यह समझने की आवश्यकता होगी कि कैसे नॉकआउट स्कॉइंग करता है। इसके अलावा

<!-- ko foreach: someCollection --> 
    <a data-bind="click: $parent.someFunction"></a> 
<!-- /ko --> 

, अगर: अगर, उदाहरण के लिए, आप एक पाश के अंदर एक क्लिक बाध्यकारी रहे हैं, और आप अपने मुख्य दृश्य मॉडल से हैंडलर चाहते हैं, आप माता-पिता गुंजाइश संदर्भ के लिए है क्योंकि पाश अपने संदर्भ में परिवर्तन है आप जावास्क्रिप्ट संदर्भ है कि अपने हैंडलर के साथ (this) कार्यान्वित बदलने की जरूरत है, तो आप इस तरह क्लिक हैंडलर बाध्य करने के लिए की जरूरत है: कि सामान के साथ एक सा

<!-- ko foreach: someCollection --> 
    <a data-bind="click: $parent.someFunction.bind($parent)"></a> 
<!-- /ko --> 

प्ले और कोई नया प्रश्न पूछ अगर आप अभी भी उलझन में। सौभाग्य!