jquery - Knockoutjs 动态模板并将 jquery 效果应用于可见性过渡

Question

我成功使用knockout js动态模板来根据用户是否单击查看项目的更多详细信息来显示不同的 View 。

基本代码如下:

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

这非常有效，可以根据某人想要查看简单 View 还是详细 View 来切换显示不同的 View 。

我想做的是使用 jqueryui 效果库应用一些过渡效果，以便详细 View 向下滑动等。

我想知道如何/是否可以拦截可见性切换，以便我可以对此应用一些效果。

Answer 1

一种选择是使用模板绑定(bind)的 afterRender 回调，如所述 here .

实际上，我通常更喜欢对此类事情使用自定义绑定(bind)。有关自定义绑定(bind)的文档是 here我的一篇文章展示了一些常见的示例 here .

就您而言，自定义绑定(bind)可能很简单:

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

init 函数仅在首次绑定(bind)元素时运行，并且在您的情况下，当模板更改时，元素将再次呈现。这会立即隐藏该元素，然后将其向下滑动。

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