Javascript 在Knockoutjs上使用DOM元素操纵“值更改前”

比如说，我有一个常见的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的项目，就不要太麻烦了。这很复杂，我明白

正如我所理解的，这可能是相当困难的，我应该考虑改变/扩展KokOutjs源，对吗？要处理开始消失动画，消失动画完成后，开始出现动画

但至少有什么方法可以防止敲除删除现有的DOM元素，让我手动处理这些元素。。。用某种方法将它们从容器中分离出来

或者，如果没有上述任何可能，那么在数据更改事件发生之前，是否只需打开

---

谢谢大家!

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

然后，您将能够在自己更新元素之前和之后执行您想要的操作

一般示例：

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

---

看看上面的文档，他们有一个动画过渡的例子，你可以将其扩展到你需要的任何地方。嗯。。。但这似乎是更新回调用于刷新某些元素的状态，以防在我的示例中，如果某些用户数据对象的某个名称发生更改，但不允许在某些新元素出现/消失之前，特别是在某些新元素出现/消失之前，即删除/创建DOM对象之前，实际调用动画，您正在寻找的是一个自定义绑定处理程序。您能更具体一点吗？正如我刚才提到的，我看不出在自定义绑定的“更新”的对面有什么像“on disposing/on remove”的东西。谢谢你的回答，不过我正在寻找另一件事。我需要的不是标题的改变和指示，而是容器。但是，我也可以尝试类似的方法。请检查以下内容：