自定義淡入淡出可見性繫結

此示例實現了一個切換可見性的自定義繫結（類似於現有的可見繫結 ），但將利用 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());