组态图标symbol层层嵌套,最底层图标有数据绑定暴露变量(未设置前缀predix),中间过渡图标嵌套过程中,不需要下一层都要对上一层图标数据绑定暴露一遍,只需要对最上一层需要被子图纸用到的图标做绑定

比如有图标层层嵌套:democrat.json → iconClick.json → iconWrapper.json → titleBar.json,直到被拖放到图纸main.json中使用,截图如下:

 

 

 

 注意以下几点:

中间过渡的图标无需创建数据绑定来申明变量,可选

过渡图标这里指不用来直接拖放到图纸上,而只用于嵌套到其他图标内的图标。过渡图标可以不做任何数据绑定databindings变量声明,没必要从最底层逐层拷贝到上一层的数据绑定中去申明变量。当然,设置了也没关系,也不会导致配置无效,简言之,中间层的数据绑定是否copy最底层图标来设置或不设置都不影响!

最上层图标如果设置了前缀则数据绑定变量需要戴上前缀

最上层图标是直接要被拖放到图纸上配置属性的,所以一定要做数据绑定把变量和类型暴露出来能在图纸属性中可以配置!同时注意,如果最上层图标设置了前缀predix(比如“icontest”),那么数据绑定暴露定义的变量时,一定要加上predix.(比如‘icontest.icon-background’),否则属性配置最底层的图标属性不会改变!

如果最上层图标不设置前缀,那么其暴露的数据绑定也一定不能设置前缀

最上层图标中数据绑定的变量命令,如果图标没有设置前缀那么也不能带,带有任何前缀但是最上层图标没有设置或者对应不上,就不会被识别,界面配置也不会有变化!

如果中间层图标设置了前缀,最上层图标数据绑定定义一定需要带上其前缀

中间层图标设置了前缀,可以同样不做数据绑定copy暴露,默认沿用底层(下一层)图标的定义;如果要设置保留变量(比如要让其支持直接拖放到图纸时),变量名称就一定要戴上设置的前缀了!

设置了前缀的中间层图标被逐层嵌套到上一层图标,这多层的中间层图标,也都可以不设置前缀和数据绑定,直接沿用当前这个中间层的!直到最上层图标要被拖放到图纸去时,数据绑定就一定要了,而且戴上前面这个中间层的前缀定义;如果最上层图标也设置了前缀,那么变量的定义也要戴上这个前缀;如果每个中间层都有设置前缀,那么各自的前缀在上一层的数据绑定变量定义中,都得戴上,如下图所示:

 

 

 

 

 

 

 

 

 

 

 

 中间层的图标如果没有设置前缀,但是其前后层的图标有设置前缀,那么在最上层数据绑定变量定义时,两层本来有其他中间层隔开的,但是前缀会靠近在一起!! 

结论总结  

图标层层嵌套,为了能配置属性,不必要层层copy复制数据绑定,会自动沿用下一层数据绑定!

任何一层一旦设置了前缀predix,那么上层做数据绑定定义变量时,一定要顺序追加带上其前缀!

任意层图标属性中配置func通过data.a(变量名)来获取变量时,变量全名称是针对最上层图标的定义来的,带前缀或不带前缀都没关系,只要跟func中data.a(xxx)使用的xxx一致即可!用属性attr绑定变量就有好处,可以实现带前缀来区分实例,否则data.a()中的作为全局,无法让图标变成可复用的独立图标!

func中如果不想用绝对变量,而想用带上前缀识别的局部变量,那就得用data.ca()替代data.a(),这样func中的代码就具有可复用性了!在多个图标拖放嵌套时,data.ca()可以根据前缀来动态识别数据绑定变量!

附加实例:

图标内一旦某个嵌套图标加了前缀predix,那么该嵌套图标中的数据绑定,用要用前缀加上嵌套图标暴露的变量名称中间点隔开,才能访问,比如:

矢量图标symbols/demo/AiotOS/icons/duotone/democrat.json,是由矢量图svg转换成的symbol图标,并且设置了数据绑定,其中矢量背景颜色icon-background属性attr方式暴露了出来,并且在databindings中定义,且该矢量图标内并未用到前缀predix

 

 

现在将该矢量图标嵌套在新的图标内,并且设置前缀也叫iconClick,随后将新图标拖放到图纸中使用,若要整成能使用嵌套矢量图标中的icon-background,必须在新图标的数据绑定变量定义中用“前缀.变量名”才能起作用,这里就是“iconClick.icon-background” 

 

现去掉上一步中图标的前缀不设置predix,这时访问嵌套图标底层图标databindings变量,就一定要直接用变量名icon-background,而不能加任何前缀了!

并且注意,数据绑定databindings中变量定义,只是用来方便给图纸用,在图纸中可以按照类型进行设置值,并且按照前缀(如果有)和属性绑定,来把值给到嵌套图标中绑定的数据变量!

同时,如果数据绑定没有任何前缀或变量名称能对应上嵌套图标以及图标的数据绑定变量,如下图所示,随意定义的数据绑定变量“xxxx”,那么其作用可以就是一个中间变量:

一方面接收图纸上数据属性配置,另一方面触发图标内属性func的函数,实现获取该变量并且赋值给底层图标暴露的变量,属性配置起作用主要是func中对底层图标数据绑点的变量赋值起作用,并非变量xxx直接对应起的作用,这也解释了在用了func的情况下,为什么全局数据绑定用不用前缀predix定义变量都能起作用的原因!

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IOTOS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值