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

一种选择是使用here描述的模板绑定的afterRender回调。

实际上，我通常更喜欢使用自定义绑定来处理此类事情。有关自定义绑定的文档为here，我发布的帖子显示了一些常见示例here。

在您的情况下，自定义绑定可以像下面这样简单：

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

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

此处示例：http://jsfiddle.net/rniemeyer/mEAJR/

Knockoutjs动态模板化并将jquery效果应用于可见性转换

1 个答案: