始终在knockoutjs中使用jquery slideUp slideDown

Question

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

我想知道,只要可见性根据可观察值发生变化,是否有某种方法可以附加像slideUp/slideDown这样的过渡.

例如,当使用'with'绑定时,当observable的值变为null时,DOM元素将自动变为不可见.我想在发生这种情况时添加jquery转换.

Answer 1

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

看到这个小提琴

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());