Question

我正在处理一个使用模板绑定呈现的列表。这些项目具有折叠和展开视图，该视图由各个项目上的可观察属性决定。这是通过为模板名称提供一个函数来完成的（就像在淘汰文档中一样）。到目前为止一切顺利，到目前为止一切都很好。现在......问题。我想在更改模板时设置转换动画。到目前为止，我已经设法动画“转换中”（使用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绑定的东西并在模板中使用它。它看起来像是：

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

然后，你会绑定类似的东西：

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

示例：http://jsfiddle.net/rniemeyer/6J67k/

具有转换的动态挖空模板

1 个答案: