javascript - 在 Knockoutjs 上操作 DOM 元素 "before-value-changed"

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 ", "消失动画完成", "开始出现动画"。

但是至少有什么方法可以防止 knockout 删除现有的 DOM 元素(让我手动处理)...某种方式来“分离”它们来自容器。

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

谢谢!

Answer 1

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

然后，您就可以在自己更新元素之前和之后执行您想要的操作。

通用示例:

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

自定义绑定(bind)淡出旧值，然后淡入新值，然后在控制台上打印完成的示例:

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