knockout.js
カスタムバインディング

バインディング登録

Cusomバインディングは、現在のknockout bindingHandlersオブジェクトを拡張して登録する必要があります。
これは、オブジェクトに新しいプロパティを追加することによって行われます。

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

ビジュアルバインディングをフェードイン/フェードアウトするカスタム

この例では、可視性（既存の可視バインディングに似ています ）を切り替えるカスタムバインディングを実装していますが、jQueryのフェーディング APIを使用して可視から不可視への遷移をアニメートします。

カスタムバインド定義：

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

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

サンプルビューモデル：

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


ko.applyBindings(new ViewModel());

カスタムテキスト置換バインド

この例は、入力値が更新されるたびにテキストを置き換えるカスタムバインディングです。この場合、スペースは "+"に置き換えられます。これは、既存の値バインディングと一緒に使用するためのもので、オブジェクトリテラルとのバインディングを示します。

replaceTextバインディングによるサンプルマークアップ：

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