2

我成功地使用淘汰赛 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 效果库应用一些过渡效果，以便详细视图向下滑动等。

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

4

1 回答 1

3

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

实际上，我通常更喜欢对这种类型的事物使用自定义绑定。有关自定义绑定的文档在此处，我的帖子在此处显示了一些常见示例。

在您的情况下，自定义绑定可能很简单：

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

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

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

于 2013-01-09T14:47:55.423 回答