1

我在业余时间为我将要做的一些当前/未来项目开发了一些 knockout.js 绑定处理程序，我想知道传递多个参数的最佳方法是什么。链接到示例绑定（不用于生产）

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

HTML：

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

Javascript：

self.isCssAnimateVisible = ko.observable(false);

我可以关闭和打开可观察对象，它会播放我希望它在该元素上播放的任何默认动画。大多数时候，这工作得很好而且花花公子。但是，如果我想将默认动画更改为跳进跳出以外的其他动画，我必须这样做：

<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>

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

有谁知道处理这个问题的最佳方法？我想在我的方法上保持一致比什么都重要。谢谢！

4

1 回答 1

1

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

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

于 2013-10-22T12:54:06.313 回答