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

ROFLwTIME

在业余时间,我正在为我将要进行的一些当前/将来的项目开发一些基因敲除(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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将数据传递到列表中的自定义类

来自分类Dev

将参数/输入数据传递到DART中的自定义元素

来自分类Dev

将参数/输入数据传递到javascript中的自定义元素

来自分类Dev

Android:将数据传递到自定义视图类中?

来自分类Dev

将数据传递到AngularJS中的自定义指令

来自分类Dev

Android:将数据传递到自定义视图类中?

来自分类Dev

从asyncTask将数据传递到自定义适配器

来自分类Dev

如何获取django-all auth将数据传递到自定义用户模型?

来自分类Dev

将数据传递到ionic 5自定义元素标签

来自分类Dev

自定义IOS7过渡,将数据传递到呈现的View Controller

来自分类Dev

将参数/输入数据传递到javascript中的自定义元素

来自分类Dev

自定义TextView将数据传递给onDraw

来自分类Dev

在Redux中处理数据传递的正确方法是什么

来自分类Dev

如何将绑定上下文传递给自定义处理程序调用?

来自分类Dev

将一些初始数据传递到新窗口的正确方法是什么?

来自分类Dev

什么是在WPF中自定义绑定文本的最佳方法

来自分类Dev

在DRF中管理自定义序列化程序的最佳方法是什么

来自分类Dev

进行自定义排序的最佳方法是什么?

来自分类Dev

GWT:制作自定义ListBox的最佳方法是什么

来自分类Dev

自定义Bootstrap的最佳方法是什么

来自分类Dev

将ssh公钥保存在自定义游民箱中的最佳方法是什么?

来自分类Dev

在React中,为什么将render方法绑定到组件实例而不是自定义方法?

来自分类Dev

Vuejs将数据绑定到自定义下拉列表

来自分类Dev

将数据传递给自定义视图然后执行该函数是一种好方法吗?

来自分类Dev

chrome扩展程序-将数据从后台传递到自定义html页面

来自分类Dev

将数据从ASP.NET传递到AngularJS的最佳方法是什么?

来自分类Dev

如何将自定义数据传递到Highcharts图单击事件

来自分类Dev

如何从ui-router中的视图将自定义数据传递到状态?

来自分类Dev

将自定义产品元数据传递到Woocommerce 4中的订单

Related 相关文章

  1. 1

    将数据传递到列表中的自定义类

  2. 2

    将参数/输入数据传递到DART中的自定义元素

  3. 3

    将参数/输入数据传递到javascript中的自定义元素

  4. 4

    Android:将数据传递到自定义视图类中?

  5. 5

    将数据传递到AngularJS中的自定义指令

  6. 6

    Android:将数据传递到自定义视图类中?

  7. 7

    从asyncTask将数据传递到自定义适配器

  8. 8

    如何获取django-all auth将数据传递到自定义用户模型?

  9. 9

    将数据传递到ionic 5自定义元素标签

  10. 10

    自定义IOS7过渡,将数据传递到呈现的View Controller

  11. 11

    将参数/输入数据传递到javascript中的自定义元素

  12. 12

    自定义TextView将数据传递给onDraw

  13. 13

    在Redux中处理数据传递的正确方法是什么

  14. 14

    如何将绑定上下文传递给自定义处理程序调用?

  15. 15

    将一些初始数据传递到新窗口的正确方法是什么?

  16. 16

    什么是在WPF中自定义绑定文本的最佳方法

  17. 17

    在DRF中管理自定义序列化程序的最佳方法是什么

  18. 18

    进行自定义排序的最佳方法是什么?

  19. 19

    GWT:制作自定义ListBox的最佳方法是什么

  20. 20

    自定义Bootstrap的最佳方法是什么

  21. 21

    将ssh公钥保存在自定义游民箱中的最佳方法是什么?

  22. 22

    在React中,为什么将render方法绑定到组件实例而不是自定义方法?

  23. 23

    Vuejs将数据绑定到自定义下拉列表

  24. 24

    将数据传递给自定义视图然后执行该函数是一种好方法吗?

  25. 25

    chrome扩展程序-将数据从后台传递到自定义html页面

  26. 26

    将数据从ASP.NET传递到AngularJS的最佳方法是什么?

  27. 27

    如何将自定义数据传递到Highcharts图单击事件

  28. 28

    如何从ui-router中的视图将自定义数据传递到状态?

  29. 29

    将自定义产品元数据传递到Woocommerce 4中的订单

热门标签

归档