Question

我想在使用已在淘汰文档中提供的observable而不是observableArray时添加动画。

考虑一个<div data-bind="text: fullname"/> fullname是observable。我希望<div>元素的内容设置为动画，并在fullname的值更改时向下滑动。类似的东西：

<div data-bind="text: fullname, transition: slideDown"/>

另外，如果有帮助，我会使用Durandal。

问题：如何将过渡动画分配给可观察对象？

Answer 1

beforeRemove和afterAdd只是订阅函数的包装器。

ko.bindingHandlers['transition'] = {
  init: function(element, valueAccessor, allBindings) {
    var transition = valueAccessor(),
        target = allBindings.get('text'),
        subscriptions = [ 
          target.subscribe(target, onChange),
          target.subscribe(target, onBeforeChange, 'beforeChange')
        ];

    function onChange() {
      // handle transition when target updates
    }

    function onBeforeChange() {
      // handle transition BEFORE target updates
    }

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      subscription[0].dispose();
      subscription[1].dispose();
    });
  }
};

Answer 2

您可以创建一个为您制作动画的custom binding handler：

ko.bindingHandlers.textSlide = {
    init: function(element, valueAccessor) {
        $(element).text(ko.unwrap(valueAccessor()));
    },
    update: function(element, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        if (value != $(element).text()) {
            $(element).slideUp(function() {
                $(this).text(value).slideDown();
            });
        }
    }
};

请参阅http://jsfiddle.net/ro0u9Lmb/

在Knockout中更改observable值的动画

2 个答案: