2013-02-05 11 views
7

के साथ कस्टम बाइंडिंग का उपयोग कैसे करें अवलोकन के साथ कस्टम बाध्यकारी काम कैसे नॉकआउट करता है? कस्टम बाध्यकारी के साथ ko.observable() का उपयोग करते समय, सब कुछ अपेक्षित के रूप में काम करता है। Ko.observableArray() का उपयोग करते समय, केवल प्रारंभिक घटनाएं (init और अद्यतन एक बार) फेंक दी जाती हैं, लेकिन आगे के परिवर्तन नहीं पाए जाते हैं (Fiddle या नीचे कोड देखें)।ko.observableArray()

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="knockout-2.2.1.js"> </script> 
</head> 
<body> 
    <div data-bind="text: Observable, updateBinding: Observable"></div> 
    <div data-bind="foreach: ObservableArray, updateBinding: ObservableArray"> 
     <span data-bind="text: $data"></span> 
    </div> 
    <script type="text/javascript"> 
     ko.bindingHandlers['updateBinding'] = { 
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
       alert("Binding Handler (Init)"); 
      }, 
      update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
       alert("Binding Handler (Update)"); 
      } 
     }; 

     function ViewModel() { 
      var self = this; 

      self.ObservableArray = ko.observableArray(); 
      self.Observable = ko.observable(); 
     } 

     var viewModel = new ViewModel(); 

     // Fires Init + Update for Observable and ObservableArray 
     ko.applyBindings(viewModel); 

     // Fires Update for Observable 
     viewModel.Observable(1); 

     // Does nothing 
     viewModel.ObservableArray.push('1'); 
    </script> 
</body> 
</html> 

उत्तर

8

आप अपने कस्टम बाध्यकारी के भीतर अपने अवलोकन योग्य पर निर्भरता बनाना चाहते हैं। तो, बहुत कम कुछ की तरह है:

ko.bindingHandlers.updateBinding = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      alert("Binding Handler (Init)"); 
     }, 
     update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      //create a dependency, normally you would do something with 'data' 
      var data = ko.utils.unwrapObservable(valueAccessor()); 
      alert("Binding Handler (Update)"); 
     } 
    }; 

कारण यह है कि यह आपके नमूदार उदाहरण के साथ काम करता है क्योंकि एक भी तत्व पर सभी बाइंडिंग एक साथ ट्रिगर कर रहे हैं (अधिक जानकारी here) है।

कारण यह है कि यह आपके अन्य बाध्यकारी पर समान व्यवहार नहीं करता है कि foreach अलग-अलग व्यवहार करता है। अवलोकन करने योग्य आरे में परिवर्तन foreach सीधे बाध्यकारी ट्रिगर नहीं करते हैं (या पूरा अनुभाग फिर से प्रस्तुत किया जाएगा)। इसके बजाए यह एक अलग ko.computed में तर्क को ट्रिगर करता है जो मूल्यांकन करता है कि सरणी कैसे बदल गई है और आवश्यक वृद्धिशील अपडेट (एक आइटम जोड़ें, एक आइटम हटाएं, आदि) बनाता है।

+0

धन्यवाद, दिलचस्प जानकारी - ये इन्फोस हैं जो मैं नॉकआउटज दस्तावेज में अपेक्षा करता हूं - कम से कम हमारे पास इस तरह की चीजों के लिए SO है :) – Dresel

संबंधित मुद्दे