1

我正在使用“with”绑定，我想在更改值之前和之后调用一些动画。有没有人知道怎么做？

4

3 回答 3

3

你总是可以用你自己的绑定来包装 with 绑定，它使用 jQuery 进行一些动画，如下所示：

ko.bindingHandlers['fadingWith'] = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
        return ko.bindingHandlers['with']['init'](element, valueAccessor, allBindingsAccessor, context);
    },
    update: function(element, valueAccessor, allBindingsAccessor, context) {
        $(element).fadeOut(100, function () {
            ko.bindingHandlers['with']['update'](element, valueAccessor, allBindingsAccessor, context)
        }).fadeIn(100);
    }
};
ko.virtualElements.allowedBindings['fadingWith'] = true;

然后你可以像这样应用它：<div data-bind="fadingWith: someObservable"><span data-bind="text: $data"></span></div>

我还没有测试过这个（我稍后会尝试），但我认为这将是前进的方向。

另一种选择（我更确定会起作用）是您创建一个单独的绑定，执行以下操作：

ko.bindingHandlers['fadeOn'] = {
    update: function(element) {
        $(element).hide().fadeIn(200);
    }
}

这不会在可观察到的变化之前为您提供动画，但它会在之后为您提供动画。所以你会做<div data-bind="with: someObservable, fadeOn: someObservable"><span data-bind="text: $data"></span></div>

编辑：我刚才想出的另一个可能更简单with的选择是在您正在使用的变量上使用油门扩展：

视图模型：

///...your code....
this.observableThatNeedsWith = ko.observable("Hello");
this.delayedObservable = ko.computed(this.observableThatNeedsWith).extend({throttle: 200});
//...continue your code

然后，您有如下绑定：

ko.bindingHandlers['fadeInOut'] = {
    update: function(element) {
        $(element).stop(true, true).stop(true, true).fadeOut(200).fadeIn(200);
    }
}

请注意，淡出时间与油门时间相同。

然后你像这样绑定它：<div data-bind="with: delayedObservable, fadeInOut: observableThatNeedsWith"><span data-bind="text: $data"></span></div>

将会发生的是，当您更改 observableThatNeedsWith 时，fadeInOut 处理程序将开始转换元素。然后在它完成淡出的那一刻（在这种情况下为 200 毫秒），油门将迎头赶上，并且延迟的Observable 将在 fadeInOut 开始淡入元素时立即更新。它淡出一件事，淡入另一件事。

于 2012-07-19T14:54:31.147 回答
1

Los Frijoles 3rd 解决方案将不起作用，因为它会限制“with”绑定以始终在动画之后发生。

由于我们试图为 with 绑定渲染的元素设置动画，当从未渲染状态变为渲染状态时，动画将尝试为不存在的元素设置动画。

Slawomir 的回答是我见过的最好的，但是出于性能原因，在移动设备上制作动画时克隆复杂元素并不是一种选择。为这些绑定正确实现动画需要改进 Knockout 框架。

编辑：我意识到可以通过用等效逻辑的“模板”或“foreach”标签替换“with”或“if”绑定来制作动画。例如，我替换了：

<div data-bind="with: selectedTimelapse">

和：

<div data-bind="template: {
    foreach: selectedTimelapse,
    afterAdd: utils.kbAnimFadeIn,
    beforeRemove: utils.kbAnimFadeOut
}">

我的示例中的“selectedTimelapse”不需要成为列表。使用它，我现在可以在设置 selectedTimelapse 时转换进出我的模态对话框。如果转换也可以破解此技术：

<div data-bind="template: {
    foreach: (showTimelapse()) ? selectedTimelapse : undefined,
    afterAdd: utils.kbAnimFadeIn,
    beforeRemove: utils.kbAnimFadeOut
}">

我的 utils.kbAnimFadeIn/Out 函数等效于此处 Knockout 动画示例页面中演示的函数：http: //knockoutjs.com/examples/animatedTransitions.html

于 2014-02-12T17:01:17.493 回答
1

我通过创建创建元素副本的绑定解决了问题。克隆此元素后，我对其进行动画处理，然后将其删除并使用新值对原始元素进行动画处理。在使用之前设置此绑定很重要

于 2012-07-24T17:22:07.127 回答