किसी भी व्यूमोडेल डोम अपडेट

Question

के लिए नॉकआउट जेएस इवेंट जब भी डॉक को नॉकआउट.जेएस के माध्यम से अपडेट किया जाता है तो मुझे कोड की एक jquery ui बिट चलाने की आवश्यकता होती है। मुझे एहसास है कि यह कस्टम बाइंडिंग का उपयोग करके किया जा सकता है, लेकिन ऐसा लगता है कि यह एक विशिष्ट व्यूमोडेल से संबंधित है, मैं इसे वैश्विक स्तर पर करना चाहता हूं, इसलिए जब भी यह किसी भी व्यूमोडेल पर होता है तो यह आग लगती है?

आइए कहें कि मैं हमेशा अपने प्रत्येक दृश्य मॉडल में इसे जोड़ने के बजाय कक्षा 'ज़रूरत के साथ सभी टेक्स्टबॉक्सों पर एक JQuery डेटपिकर चाहता हूं, यह बहुत अच्छा होगा अगर मैं इसे वैश्विक रूप से कर सकता हूं।

क्या यह संभव है?

Answer 1

यदि आप गतिशील रूप से तत्वों को जोड़ने/हटाने के लिए नहीं जा रहे हैं, तो आप उन्हें सामान्य रूप से तार कर सकते हैं। हालांकि, यदि आप गतिशील सामग्री के साथ काम कर रहे हैं (जैसे एक अवलोकन योग्य ऐरे का उपयोग करना जिसमें इसकी वस्तुओं को संशोधित किया गया है), तो आपके पास कुछ विकल्प हैं:

1- here उत्तर की तरह, आप एक कस्टम बाध्यकारी बना सकते हैं। आप अपना दृश्य मॉडल पर एक संपत्ति के मूल्य के लिए बाध्य नहीं करना चाहते हैं, तो आप की तरह कुछ के लिए बाध्य को आसान बनाने में कर सकते हैं:

<input data-bind="datepicker: { minDate: new Date() }" />

:

ko.bindingHandlers.datepicker = { 
    init: function(element, valueAccessor) { 
     //initialize datepicker with some optional options 
     var options = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).datepicker(options); 

     //handle disposal (if KO removes by the template binding) 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).datepicker("destroy"); 
     }); 
    } 
}; 

आप की तरह एक तत्व पर रखें हैं

2- दूसरा विकल्प template (और foreach जो template उपयोग करता है) के afterRenderfunctionality उपयोग करने के लिए अपने datepickers ऊपर तार की नई सामग्री प्रदान की गई है के बाद है।

Answer 2

मैंने एक refreshJQuery() फ़ंक्शन बनाया है जो एक ही बार में मेरे सभी बीफ़ी व्यवहार लागू करता है। जब मैं अपने मॉडल को अद्यतन करने के लिए अपने दृश्य मॉडल में अवलोकनों की सदस्यता लेता हूं तो मैं इस फ़ंक्शन को कॉल करता हूं। और एक बार पेज लोड पर।

function refreshJQuery() { 
    $(".draggable, .droppable, .resizable").each(function() { 

     var $element = $(this); 

     if ($element.hasClass("draggable") && !$element.data("init-draggable")) { 
      $element.data("init-draggable", true).draggable(dragBehavior); 
     } 
     if ($element.hasClass("droppable") && !$element.data("init-droppable")) { 
      $element.data("init-droppable", true).droppable(dropBehavior); 
     } 
     if ($element.hasClass("resizable") && !$element.data("init-resizable")) { 
      $element.data("init-resizable", true).resizable(resizeBehavior); 
      $(this).children().fadeTo(2000, 0); 
      $element.hover(function() { 
       $(this).children().fadeTo(200, 1); 
      }, 
      function() { 
       $(this).children().fadeTo(750, 0); 
      }); 
     } 
    }); 
}; 

मैं तो, इसका इस्तेमाल इस प्रकार है हालांकि मैं 2 अन्य observables की पहचान की है मैं भी इस समारोह कॉल करने की आवश्यकता:

this.updateTime = function() { 
    service.updateBookingTimes(this.id(), this.startDate(), this.endDate()); 
    refreshJQuery(); 
}; 

this.startDate.subscribe(this.updateTime, this); 
this.endDate.subscribe(this.updateTime, this); 

मैं भी क्रियान्वित किया है @ क्षेत्र स्तर JQuery के लिए RPNiemeyer के समाधान सब्सक्रिप्शन, इसलिए डेटपिकर के लिए उनके नमूने के अलावा, मेरे पास समान कोड है जो $.button()<a> टैग और दूसरा जो चेकबॉक्स को आईफोन स्टाइल स्विच में परिवर्तित करता है।