【快应用】表单组件的model属性实际运用

 【关键词】

表单组件、model

【问题背景】

在使用表单组件时，往往需要同时绑定值和 change 事件动态更新数据，当表单交互较多的场景下会有大量与业务无关的代码。

快应用从1100版本开始引入 model 指令，使用 model 指令可以简化代码逻辑，在框架内部对值进行绑定与更新，实现双向绑定的效果。

【实现方法】

model 指令本质上是一个语法糖，原理是在编译时为组件自动绑定了 change 事件，通过 change 事件为双向绑定的数据更新变更后的值，目前仅支持在input，select和textarea中使用。

使用 model 指令实现双向绑定

Input组件type为text时：

input value:{{ inputValue }}
 

Input组件type为raido时， 可以为“model:value”绑定一个数组，该数组将包含所有选中的 checkbox 的 value 值：

      
      Jack
    
    

      
      John
    
    

      
      Mike
    
    Checked names: {{ checkedNames }}

Select组件中使用model：

selected value:{{ selectedValue }}
    
      item0
      item1
      item2
      item3
      item4
    

 Textarea中使用model： 

input textarea value:{{ newValue }}
    

组件中使用model：

1.定义一个含有表单元素的自定义组件，当触发change事件时，“update:sampleName”事件会向父级传递值。

“update:”为固定前缀。

“sampleName”为当前组件和父级双向绑定的属性名称。

2. 父组件中正常引入组件，并使用“model:sample-name”，即可完成自定义组件的 sampleName 属性双向绑定。

comp use model
    

      sampleName: {{ name }}
      
    

Tips：请勿在使用 model 指令时，再为组件手动绑定 change 事件，如果同时使用 toolkit 编译时，只会保留开发者定义的 change 事件，导致 model 指令失效。

【完整代码】

hello.ux

comp.ux

【效果图】

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net