animation in show hideボタン

Question

私は私の簡単なfuctionに問題があります。私はより多くのコンテンツ以下を表示する目的球を持っている、それが正常に動作しますが、私はフェードイン、フェードアウトHTMLで

this.showMore = ko.observable(false); 
this.toggleShowMore = function() { 
    this.showMore(!this.showMore()); 
}; 

とデータバインドように私が存在関数に簡単なアニメーションを追加する方法がわかりません

<button class="btn btn-xs btn-info" data-bind='click: toggleShowMore '>More data</button> 

このコードは正しく動作しますが、アニメーションの追加方法はわかりません。 これはknokoutの私の最初のステップですので、私はあなたの助けに感謝します。

Answer 1

カスタムバインディングを使用します。 http://knockoutjs.com/documentation/custom-bindings.html私はかなり下の例をコピーして貼り付けました。スライドの代わりにフェードするように変更しました。

ko.bindingHandlers.slideVisible = { 
 
    update: function(element, valueAccessor, allBindings) { 
 
     // First get the latest data that we're bound to 
 
     var value = valueAccessor(); 
 
    
 
     // Next, whether or not the supplied model property is observable, get its current value 
 
     var valueUnwrapped = ko.unwrap(value); 
 
    
 
     // Grab some more data from another binding property 
 
     var duration = allBindings.get('fadeDuration') || 400; // 400ms is default duration unless otherwise specified 
 
    
 
     // Now manipulate the DOM element 
 
     if (valueUnwrapped == true) 
 
      $(element).fadeIn(duration); // Make the element visible 
 
     else 
 
      $(element).fadeOut(duration); // Make the element invisible 
 
    } 
 
}; 
 

 
var viewModel = { 
 
     giftWrap: ko.observable(true) 
 
    }; 
 
    viewModel.togglegiftWrap = function() { 
 
     viewModel.giftWrap(!viewModel.giftWrap()) 
 
    }; 
 
    ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div data-bind="slideVisible: giftWrap, fadeDuration:600">You have selected the option</div> 
 
<button class="" data-bind="click: togglegiftWrap">More info</button>