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来源（对吗？）来处理“ 开始消失 - 动画 “，” 消失 - 动画完成 “，” 开始出现动画 “。

但至少有任何方法阻止淘汰赛删除现有的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

在Knockoutjs上使用DOM元素进行操作“before-value-changed”

1 个答案: