javascript - 带过渡的动态 knockout 模板

Question

我正在处理一个使用模板绑定(bind)呈现的列表。这些项目有一个折叠和展开的 View ，这是由各个项目的可观察属性决定的。这是通过为模板名称提供一个函数来完成的(就像在 knockout 文档中一样)。到目前为止一切都很好，到目前为止一切都很好。现在.. 问题。我想在更改模板时为过渡设置动画。到目前为止，我已经设法为“过渡中”(使用 afterRender 事件)制作动画，即加载新模板时。但我也想在旧模板被删除之前为它做一个“Out-transition”。这就是我现在的情况。 http://jsbin.com/UvEraGO/15/edit?html,js,output

知道如何实现这个“外转换”吗？

代码如下:

[viewmodel.js]
var vm = {
  items: [{name: 'John', age:'34', expanded: ko.observable(false)},
          {name: 'David', age:'24', expanded: ko.observable(false)},
         {name: 'Graham', age:'14', expanded: ko.observable(false)},
         {name: 'Elly', age:'31', expanded: ko.observable(true)},
         {name: 'Sue', age:'53', expanded: ko.observable(false)},
          {name: 'Peter', age:'19', expanded: ko.observable(false)}]


};

vm.myTransition = function(el){
  $(el[1]).hide().slideDown(1000);
};

vm.templateSelector = function(item){
  return item.expanded() ? 'expanded_template' : 'collapsed_template';
}.bind(vm);

vm.toggleTemplate = function(item){
  item.expanded(!item.expanded());
};

ko.applyBindings(vm);

和 html:

<div data-bind="template: { name: templateSelector, foreach: items, afterRender: myTransition }"></div>

<script type="text/html" id="collapsed_template">
    <div style="min-height: 30px">
        <strong>Name: <span data-bind="text: name"></span></strong>
        <button data-bind="click: $parent.toggleTemplate">Expand</button>
        <div>
</script>

<script type="text/html" id="expanded_template">
    <fieldset style="height: 100px; min-height: 8px">
        <legend>
            <strong>Name: <span data-bind="text: name"></span></strong>
        </legend>
        <div>
            Age: <span data-bind="text: age"></span>
            <button data-bind="click: $parent.toggleTemplate">collapse</button>
        </div>

    </fieldset>
</script>

Answer 1

一个想法是创建类似 slideTemplate 绑定(bind)的东西，并在您的模板中使用它。它看起来像:

ko.bindingHandlers.slideTemplate = {
    init: ko.bindingHandlers.template.init,
    update: function(element, valueAccessor, allBindings, data, context) {
        //ensure that we have a dependency on the name
        var options = ko.unwrap(valueAccessor()),
            name = options && typeof options === "object" ? ko.unwrap(options.name) : name,
            $el = $(element);

        if ($el.html()) {
            $el.slideUp(250, function() {
                ko.bindingHandlers.template.update(element, valueAccessor, allBindings, data, context);

                $el.slideDown(1000);
            });
        }
        else {
            ko.bindingHandlers.template.update(element, valueAccessor, allBindings, data, context);
        }
    }
};

然后，您将绑定(bind)如下内容:

<ul data-bind="foreach: items">
    <li  data-bind="slideTemplate: type">
    </li>
</ul>

样本:http://jsfiddle.net/rniemeyer/6J67k/