knockout.js
Encuadernaciones personalizadas

Registro obligatorio

Los enlaces de Cusom deben registrarse extendiendo el objeto knockout bindingHandlers actual.
Esto se hace agregando una nueva propiedad al objeto.

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

Custom fade in / fade out enlace de visibilidad

Este ejemplo implementa un enlace personalizado que alterna la visibilidad (similar al enlace visible existente), pero utilizará la API de desvanecimiento de jQuery para animar la transición de visible a invisible.

Definición de encuadernación personalizada:

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

Marcado de muestra con el enlace fadeVisible:

<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

Modelo de vista de muestra:

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


ko.applyBindings(new ViewModel());

Texto personalizado reemplazar enlace

Este ejemplo es un enlace personalizado que reemplaza el texto cada vez que se actualiza un valor de entrada. En este caso, los espacios serán reemplazados con "+". Está destinado a ser usado junto con el enlace de valor existente, y muestra el enlace con un objeto literal.

Marcado de muestra con el enlace de reemplazo de texto:

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

Definición de encuadernación personalizada:

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

Modelo de vista de muestra:

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

ko.applyBindings(new ViewModel());

Reemplazar con el enlace personalizado expresión regular

Definición de enlace personalizado

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
}

Uso

ViewModel

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

Ver

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