knockout.js
कस्टम बाइंडिंग

बाइंडिंग पंजीकरण

Cusom बाइंडिंग को वर्तमान नॉकआउट बाइंडहैंडर्स ऑब्जेक्ट को बढ़ाकर पंजीकृत किया जाना चाहिए।
यह ऑब्जेक्ट में एक नई संपत्ति जोड़कर किया जाता है।

ko.bindingHandlers.newBinding = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    }
};

दृश्यता बंधन में कस्टम फीका / फीका

यह उदाहरण एक कस्टम बाइंडिंग को लागू करता है जो दृश्यता (मौजूदा दृश्यमान बाइंडिंग के समान) को टॉगल करता है, लेकिन दृश्य से अदृश्य में संक्रमण को चेतन करने के लिए jQuery के लुप्त होती एपीआई का उपयोग करेगा।

कस्टम बाइंडिंग परिभाषा:

//Add a custom binding called "fadeVisible" by adding it as a property of ko.bindingHandlers
ko.bindingHandlers.fadeVisible = {
  //On initialization, check to see if bound element should be hidden by default
  'init': function(element, valueAccessor, allBindings, viewModel, bindingContext){
    var show = ko.utils.unwrapObservable(valueAccessor());
    if(!show){
      element.style.display = 'none';
    }
  },
  //On update, see if fade in/fade out should be triggered. Factor in current visibility 
  'update': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var show = ko.utils.unwrapObservable(valueAccessor());
    var isVisible = !(element.style.display == "none");
    
    if (show && !isVisible){
      $(element).fadeIn(750);
    }else if(!show && isVisible){
      $(element).fadeOut(750);
    }
  }
}

फीका अदृश्य बंधन के साथ नमूना मार्कअप:

<div data-bind="fadeVisible: showHidden()">
  Field 1: <input type="text" name="value1" />
  <br />
  Field 2: <input type="text" name="value2" />
</div>
<input data-bind="checked: showHidden" type="checkbox"/> Show hidden

नमूना दृश्य मॉडल:

var ViewModel = function(){
    var self = this;
    self.showHidden = ko.observable(false);
}


ko.applyBindings(new ViewModel());

कस्टम टेक्स्ट बाइंडिंग को प्रतिस्थापित करता है

यह उदाहरण एक कस्टम बाइंडिंग है जो टेक्स्ट को इनपुट वैल्यू अपडेट होने पर बदल देता है। इस स्थिति में, रिक्त स्थान को "+" से बदल दिया जाएगा। यह मौजूदा मूल्य बाइंडिंग के साथ उपयोग किया जाना है, और एक वस्तु शाब्दिक के साथ बाध्यकारी दिखाता है।

रिप्लेसमेंट बाइंडिंग के साथ नमूना मार्कअप:

<input type="text" data-bind="value: myField, replaceText: {value: myField, find:' ', replace:'+'}" />

कस्टम बाइंडिंग परिभाषा:

ko.bindingHandlers.replaceText = {

   //On update, grab the current value and replace text
  'update': function(element, valueAccessor, allBindings, viewModel, bindingContext) {

      //Get the current value of the input 
      var val = ko.utils.unwrapObservable(valueAccessor().value());

      //Replace text using passed in values obtained from valueAccessor()
      //Note - Consider using something like string.js to do the find and replace
      var replacedValue = val.split(valueAccessor().find).join(valueAccessor().replace);

      //Set new value
      valueAccessor().value(replacedValue);
  }
}

नमूना दृश्य मॉडल:

var ViewModel = function(){
  var self = this;
  self.myField = ko.observable("this is a simple test");
}
 

ko.applyBindings(new ViewModel());

नियमित अभिव्यक्ति कस्टम बाइंडिंग के साथ बदलें

कस्टम बाइंडिंग परिभाषा

function regExReplace(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

  var observable = valueAccessor();
  var textToReplace = allBindingsAccessor().textToReplace || '';
  var pattern = allBindingsAccessor().pattern || '';
  var flags = allBindingsAccessor().flags;
  var text = ko.utils.unwrapObservable(valueAccessor());
  if (!text) return;
  var textReplaced = text.replace(new RegExp(pattern, flags), textToReplace);

  observable(textReplaced);
}

ko.bindingHandlers.regExReplace = {
  init: regExReplace,
  update: regExReplace
}

प्रयोग

ViewModel

ko.applyBindings({
  name: ko.observable(),
  num: ko.observable()
});

राय

<input type="text" data-bind="textInput : name, regExReplace:name, pattern:'(^[^a-zA-Z]*)|(\\W)',flags:'g'" placeholder="Enter a valid name" />
<span data-bind="text : name"></span>
<br/>
<input class=" form-control " type="text " data-bind="textInput : num, regExReplace:num, pattern: '[^0-9]',flags: 'g' " placeholder="Enter a number " />
<span data-bind="text : num"></span>