javascript - 在knockoutjs中始终使用jquerylideUpslideDown

Question

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

我想知道每当可见性根据可观察值发生变化时，是否有某种方法可以附加像 SlideUp/slideDown 这样的转换。

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

Answer 1

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

<强> See this fiddle

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