Knockoutjs动态模板和应用jquery效果的可见性过渡

Question

我成功地使用了knockout js动态模板来显示不同的视图，这取决于用户是否点击以查看项目的进一步详细信息。

基本代码如下:

<div data-bind="template : {name: GetView , foreach: DisplayableItems}"></div>
<script type="text/html" id="SimpleView">
<div class="entry list">
    <h1>Simple View </h1>
    <a  data-bind="click:ToggleDisplayMode">Expand</a>
</div>
</script>
<script type="text/html" id="DetailView">
<div class="entry list">
    <h1>Detail View </h1>
    <a  data-bind="click:ToggleDisplayMode">Collapse</a>
</div>
</script>
ViewModel = function () {
var self = this ;
self.ToggleDisplayMode = function() {
    self.DisplayMode() == 'simple' ? self.DisplayMode('detail') : self.DisplayMode('simple');
};
self.GetView = function (contentItem) {
    if (contentItem.DisplayMode() == "simple")
        return "SimpleView";
    else
        return "DetailView";
 };
}
ContentItem = function() {
var self = this;
self.DisplayMode =  ko.observable("simple"); 
}

这工作得很好，并根据用户想要查看简单视图还是详细视图在显示不同视图之间切换。

我想做的是应用一些过渡效果，使细节视图滑动等使用jqueryui效果库。

我想知道如何/是否这将有可能拦截如何可见性切换，以便我可以应用一些效果到这个

Answer 1

一个选择是使用这里描述的模板绑定的afterRender回调。

对于这类事情，我通常更喜欢使用自定义绑定。关于自定义绑定的文档在这里，我有一篇文章展示了一些常见的例子。

在您的例子中，自定义绑定可以简单到:

ko.bindingHandlers.slideVisible = {
  init: function(element, valueAccessor) {
      var duration = ko.utils.unwrapObservable(valueAccessor());
      $(element).hide().slideDown(duration); 
  }
};

init函数只在元素第一次绑定时运行，在你的例子中，当模板改变时，元素会再次呈现。这将立即隐藏元素，然后向下滑动。

示例如下:http://jsfiddle.net/rniemeyer/mEAJR/