knockout.js
Aangepaste bindingen

Bindende registratie

Cusom-bindingen moeten worden geregistreerd door het huidige knockout bindingHandlers-object uit te breiden.
Dit wordt gedaan door een nieuwe eigenschap aan het object toe te voegen.

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

Aangepaste infade in / fade out zichtbinding

Dit voorbeeld implementeert een aangepaste binding die de zichtbaarheid omschakelt (vergelijkbaar met de bestaande zichtbare binding ), maar zal de fading API van jQuery gebruiken om de overgang van zichtbaar naar onzichtbaar te animeren.

Aangepaste bindende definitie:

//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);
    }
  }
}

Voorbeeldmarkering met de fadeVisible binding:

<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

Voorbeeldweergave model:

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


ko.applyBindings(new ViewModel());

Aangepaste tekst vervangt binding

Dit voorbeeld is een aangepaste binding die tekst vervangt wanneer een invoerwaarde wordt bijgewerkt. In dit geval worden spaties vervangen door "+". Het is de bedoeling naast de bestaande te gebruiken waarde binden en toont binding met een letterlijk object.

Voorbeeldmarkeringen met de binding bindText:

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

Aangepaste bindende definitie:

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);
  }
}

Voorbeeldweergave model:

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

ko.applyBindings(new ViewModel());

Vervangen door aangepaste expressie aangepaste binding

Aangepaste bindende definitie

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
}

Gebruik

ViewModel

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

Visie

<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>