3

我知道如何在 knockoutjs 中创建自定义绑定，以便在可观察值发生变化时添加 jquery 过渡动画。

我想知道是否有某种方法可以在可见性基于可观察值发生变化时附加像 slideUp/slideDown 这样的转换。

例如，当使用 'with' 绑定时，当 observable 的值变为 null 时，DOM 元素会自动变为不可见。每当发生这种情况时，我想添加一个 jquery 转换。

4

2 回答 2

12

这可以通过使用自定义绑定来完成。

看到这个小提琴

HTML

<div>
    Visible <input type="checkbox" data-bind="checked: visible" />
    <div data-bind="slideIn: visible" class="slider">
        <h1>I'm visible</h1>
    </div>
</div>

CSS

.slider
{
    border: solid 1px rgb(200, 200, 200);
    color: rgb(50, 50, 50);
    background-color: rgb(100,255,100);
    text-align: center;
}

JavaScript

var VM = function(){
    this.visible = ko.observable(true)
};

ko.bindingHandlers.slideIn = {
    init: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).toggle(value);
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        value ? $(element).slideDown() : $(element).slideUp();
    }
};

ko.applyBindings(new VM());
于 2013-10-24T04:41:17.720 回答
1

你看过这个： http: //knockoutjs.com/examples/animatedTransitions.html吗？

于 2013-10-23T08:53:27.800 回答