Question

我正忙于在业余时间为一些当前/未来的项目做一些knockout.js绑定处理程序，我想知道传递多个参数的最佳方法是什么。 Link to example bindings（不供生产使用）

例如，我有一个“cssAnimateVisible”绑定处理程序，如下所示：

HTML：

<div data-bind="cssAnimateVisible: isCssAnimateVisible">Animation</div>

使用Javascript：

self.isCssAnimateVisible = ko.observable(false);

我可以关闭和打开observable，它将播放我希望它在该元素上播放的任何默认动画。大多数时候，这很好用和花花公子。但是，如果我想将默认动画更改为弹跳进出以外的其他内容，我必须这样做：

<div data-bind="cssAnimateVisible: { observable: isCssAnimateVisible, animation: 'flipInY', animationOut: 'flipOutY'}">Animation</div>

正如您所看到的，我传递了更多变量，因为我不想对此特定元素使用默认动画。这种方法是我目前在我的项目网站上的方法，但我不喜欢传入一个名为“observable”的变量，因为这似乎让html控件膨胀，所以我把它缩小到这个：

<div data-bind="cssAnimateVisible: isCssAnimateVisible, animation: 'flipInY', animationOut: 'flipOutY'">Animation</div>

正如您所看到的，它比上面要短得多，但它确实将“cssAnimateVisible”的上下文中的其他参数排除在外，由于与某人可能具有的其他自定义绑定的命名冲突，这可能是一个潜在的缺点。

此外，我想过只传递这样的变量：

<div data-bind="cssAnimateVisible: { isCssAnimateVisible, 'flipInY', 'flipOutY' }">Animation</div>

这使得它更短，因为必须知道传入的参数的顺序。

最后，我考虑过为animate.css库中的各种动画创建许多不同的绑定处理程序，如下所示：

<div data-bind="cssBounceVisible: isCssAnimateVisible1">Animation</div>
<div data-bind="cssFlipVisible: isCssAnimateVisible2">Animation</div>
<div data-bind="cssLightSpeedVisible: isCssAnimateVisible3">Animation</div>

这种方法增加了我的项目中的代码行，同时没有提供足够的灵活性。尽管如此，它可能是最短的数据绑定。

有谁知道处理此问题的最佳方法？我希望在我的方法中保持一致。谢谢！

Answer 1

Best是一个基于意见的术语，但在对象文字中包装可观察数据或为每个observable使用单独的绑定名称之间也存在技术差异。

如果要支持写入无可观察对象，则需要为要绑定的每个可观察对象使用单独的绑定名称，否则ko.expressionRewriting.writeValueToProperty将无法写入无可观察对象。

将数据传递给自定义绑定处理程序的最佳方法是什么？

1 个答案: