KnockoutJS:将if绑定封装在自定义绑定中

KnockoutJS: Wrapping the if binding in a custom binding

本文关键字：绑定 自定义 封装 KnockoutJS if      更新时间：2023-09-29

我目前正在阅读使用Knockout创建自定义绑定的文档，我可以理解这个概念，但在实践中应用它时遇到了困难。

具体来说，我想为if绑定提供一个slideUp/slideDown jQuery动画。然而，我遇到了麻烦，只是让KO"看到"我的自定义绑定。如果能指出关于扩展if绑定的正确方向，将不胜感激。

附加说明：

我在这里使用KO外部模板引擎，就像这样：

<!-- ko template: { name: 'SummaryBox', if: expanded } --><!-- /ko -->

我创建了一个非常基本的自定义绑定来包装默认的"if"：

ko.bindingHandlers['slidingIf'] = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
        return ko.bindingHandlers['if']['init'](element, valueAccessor, allBindingsAccessor, context);
    },
    update: function(element, valueAccessor, allBindingsAccessor, context) {
        return ko.bindingHandlers['if']['update'](element, valueAccessor, allBindingsAccessor, context);
    }
};
ko.virtualElements.allowedBindings['slidingIf'] = true;

但当我用这个替换以前的绑定时，

<!-- ko template: { name: 'SummaryBox', slidingIf: expanded } --><!-- /ko -->

该模板基本上忽略了"slidingIf"绑定，只按原样显示我的模板。

传递给template绑定的值是该绑定的选项，而不是它们自己的单独绑定。因此，template绑定本身并不知道您的slidingIf绑定。

您可能需要单独使用slidingIf绑定，或者为执行动画的template绑定编写包装器。

我试过了，但发现我的"内部"绑定失败了，所以我做了这个更改：

return ko.bindingHandlers['if']['update'].apply(this, Array.prototype.slice.call(arguments));

相关文章：