使用 Knockoutjs 上的 DOM 元素“更改值之前”进行操作

Question

比方说，我只是有一个常见的 Knockoutjs 布局/方法：

    function User(data) {
        this.name = ko.observable(data.name);
    }

    function UsersViewModel() {
        var self = this;

        self.users = ko.observableArray([]);
    }

    var viewModel = new UsersViewModel();
    service.initialize(viewModel);
    ko.applyBindings(viewModel);

和 HTML：

<ul data-bind="foreach: users">
    <li>
        <span data-bind="text:name"></span>
    </li> 
</ul>

我想要的是在 Knockoutjs 中对数据更改应用一些漂亮的动画：现有 DOM 元素平滑消失（这需要一些时间，而消失结束），和在此之后（或什至在开始消失时）在出现的新元素上开始动画。 （在这个例子中——“li”元素会随着每个元素单独的动画而单独消失（每个元素之间会有一些延迟）（但这并不重要））。

（我认为这里将完全替换元素（假设新数据包含具有相同 id 的项目时不要太在意……这很复杂，我理解）。

据我所知，这可能非常困难，我应该考虑更改/扩展 Knockoutjs 源（对吗？）以处理“start-disappearing-animation ", "disappearing-animation-finished", "start-appearing-animation"。

但至少有什么方法防止敲除删除现有的 DOM 元素（让我手动处理）...某种“分离”它们的方法来自容器。

或者，如果没有其他可能，那么只是“在数据更改之前开启”事件？

谢谢！

Answer 1

您可以使用自定义绑定来更新元素。

然后，您将能够在自己更新元素之前和之后做您想做的事情。

通用示例：

ko.bindingHandlers.textAnimated = {
    update: function(element, valueAccessor) {
        var value = valueAccessor();

        var valueUnwrapped = ko.utils.unwrapObservable(value);

        // Before changing value
        // Do something

        $(element).text(valueUnwrapped);        

        // After changing value
        // Do something else
    } 
};

自定义绑定淡出旧值，然后淡入新值，然后在控制台上打印的示例：

ko.bindingHandlers.textAnimated = {
    update: function(element, valueAccessor) {
        var value = valueAccessor();

        var valueUnwrapped = ko.utils.unwrapObservable(value);

        $(element).fadeOut('slow', function() {
            $(element).text(valueUnwrapped);       

            $(element).fadeIn('slow', function() {
                console.log('done');
            });
        });
    } 
};

See the JSFiddle