这个例子稍微复杂一点，重点关注数据绑定。在这个例子中，模型（也就是数据）里包括一台空调和一台咖啡机：
变量名 | 数据类型 | 功能说明 |
空调_开关 | 布尔 | 空调开关 |
空调_模式 | 整数 | 空调模式 (0: 制冷；1: 制热；2: 送风；2: 除湿；4: 自动） |
空调_风速 | 整数 | 0-4 共五档 |
空调_垂直风向 | 整数 | 垂直风向 (0: 自动；1：上；2：中；3：下） |
空调_水平风向 | 整数 | 水平风向（0：自动；1：左；2：中；3：右） |
空调_温度 | 布尔 | 温度（0-40） |
咖啡_开关 | 整数 | 咖啡开关 |
咖啡_类型 | 整数 | 类型 (0: 卡布奇诺；1: 拿铁；2: 美式；3: 意式） |
咖啡_温度 | 整数 | 温度（0-100） |
咖啡_口味 | 整数 | 口味 (0: 浓郁；1: 丝滑；2: 清淡；3: 平衡；4: 温和） |
咖啡_热奶 | 整数 | 热奶 (0: 少量；1: 较少；2: 较多；3: 大量） |
咖啡_奶泡 | 整数 | 奶泡 (0: 少量；1: 较少；2: 较多；3: 大量） |
咖啡_水量 | 整数 | 水量 (50-350ml) |
咖啡_剩余时间 | 整数 | 制作时间（格式：分钟：秒） |
咖啡_开始制作 | 布尔 | 开始制作 |
从模板创建项目，将 hmi/template_app 拷贝 hmi/home_automation 即可。
项目最好不要放到其它目录，因为放到其它目录需要修改配置文件中的路径，等熟悉之后再考虑放到其它目录。路径中也不要中文和空格，避免不必要的麻烦。
里面的控件太多，为了不至于太累赘，不同类型的绑定只举一个例子：
完整示例可以参考 hmi/demo_app3
中间的静态文本
绑定属性 | 绑定规则 | 说明 |
v-data:value | {空调_温度+‘℃’} |
右边的按钮（增加）
绑定属性 | 绑定规则 | 说明 |
v-on:click | {fscript, Args=set(空调_温度，min(空调_温度+1, 40))} | 这里用函数 set 将变量空调_温度增加 1 度。min 函数保证变量的值不会超出 40。 |
绑定属性 | 绑定规则 | 说明 |
v-on:click | {fscript, Args=set(空调_温度，max(空调_温度-1, 40))} | 这里用函数 set 将变量空调_温度减少 1 度。max 函数保证变量的值不会小于 0。 |
v-on:click 是一个常见的事件，最好记住，可以提高效率。
这个用一组单选按钮实现，将多个单选按钮放到 group_box 里（将多个单选按钮放到 view 里也可以，只是需要为每个单选按钮编写绑定规则）。
绑定属性 | 绑定规则 | 说明 |
v-data:value | {空调_模式} |
如果使用 view 作为容器，则麻烦一点。需要为每个单选按钮编写两条绑定规则：
绑定属性 | 绑定规则 | 说明 |
v-data:value | {空调_模式 == 0} | 这里的 0 是单选按钮的序数，根据实际情况调整 |
v-on:click | {fscript, Args=set(空调_模式，0)} | 这里的 0 是单选按钮的序数，根据实际情况调整 |
这种方式虽然麻烦，但是可以处理变量的值不是从 0 开始或者不连续的情况。
绑定属性 | 绑定规则 | 说明 |
v-data:value | v-data:value="{one_of(‘制冷;制热;送风;除湿;自动’, 空调_模式)} | 这里的 one_of 的功能是从指定的字符串数组中取出对应的子串。 |
剩余时间用一个静态文本显示。问题在于，剩余时间在内部用一个正整数表示(秒数)，而显示的是“分钟:秒”。所以需要一个转换表达式：
绑定属性 | 绑定规则 | 说明 |
v-data:value | int(咖啡_剩余时间/60) + ‘:’ + 咖啡_剩余时间%60} | 表达是按浮点数计算的，这里的 int 将结果转换为正数。 |
在点击开关按钮时，会自动显示或隐藏右边的设置视图。这是通过将视图的可见性(visible)绑定到开关的状态实现的:
绑定属性 | 绑定规则 | 说明 |
v-data:visible | {空调_开关} |
4.6 指定窗口的模型为 default
这是最简单也是最关键的一步:
绑定属性 | 绑定规则 | 说明 |
v-model | default |
严格的意义上说，绑定规则也是一种代码，不过相比于 C 语言，它有下面的优势：
无需编译，直接运行。
简单，通常只有一行。
易懂，声明式的语法。
修改资源文件 design/default/data/default_model.json, 将其内容改为：
{"空调_开关" : false,"空调_模式" : 3,"空调_风速" : 3,"空调_垂直风向" : 1,"空调_水平风向" : 1,"空调_温度": 25,"咖啡_开关" : false,"咖啡_类型" : 1,"咖啡_温度" : 60,"咖啡_口味" : 1,"咖啡_热奶" : 1,"咖啡_奶泡" : 1,"咖啡_水量" : 150,"咖啡_剩余时间" : 200,"咖啡_开始制作" : false}
推荐产品
技术交流群
更多往期文章，请点击“ 阅读原文 ”。
