knockout.js
Anpassade bindningar

Bindande registrering

Cusom-bindningar bör registreras genom att utöka det aktuella knockout-bindandeHandlers-objektet.
Detta görs genom att lägga till en ny egenskap till objektet.

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

Anpassad fade in / blekna synlighet bindande

Detta exempel implementerar en anpassad bindning som växlar synlighet (liknande den befintliga synliga bindningen ), men kommer att använda jQuerys fading API för att animera övergången från synlig till osynlig.

Anpassad bindande definition:

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

Provmarkering med fadeVisibel bindning:

<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

Exempelvisningsmodell:

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


ko.applyBindings(new ViewModel());

Anpassad text ersätter bindning

Detta exempel är en anpassad bindning som ersätter text när ett inmatningsvärde uppdateras. I detta fall kommer utrymmen att ersättas med "+". Den är avsedd att användas vid sidan av den befintliga värdebindningen och visar bindning med ett bokstavligt objekt.

Provmarkering med utbytet av bindande text:

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

Anpassad bindande definition:

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

Exempelvisningsmodell:

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

ko.applyBindings(new ViewModel());

Byt ut med anpassad bindning med vanligt uttryck

Anpassad bindande definition

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
}

Användande

Viewmodel

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

Se

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