在业余时间,我正在为我将要进行的一些当前/将来的项目开发一些基因敲除(snockout.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>
这种方法增加了我项目中的代码行,并且没有提供太多的灵活性。尽管如此,它可能是所有这些中最短的数据绑定。
有谁知道处理此问题的最佳方法?我最想保持自己的方法一致。谢谢!
最佳是一个基于意见的术语,但是在将可绑定的数据绑定到对象文字中或为每个可观测的单词使用单独的绑定名称之间存在技术上的区别。
如果要支持写非可观察对象,则需要为要绑定的每个可观察对象使用单独的绑定名称,否则ko.expressionRewriting.writeValueToProperty
将无法写非可观察对象。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句