AWTK-MVVM学习（二）：数据绑定与命令绑定

一、前言

上周简单介绍了AWTK-MVVM，并按照规则设计了图书管理系统的Model，详见文章：AWTK-MVVM学习（一）。本周学习了AWTK-MVVM的数据绑定和命令绑定，本文记录其中的关键内容，更详细的教程请参考awtk-mvvm/docs下的md文档。

awtk-mvvm仓库：http://github.com/zlgopen/awtk-mvvm

二、数据绑定

在进行数据绑定之前，先要建立 View（UI界面）与 ViewModel的联系。在AWTK 中用XML文件来描述用户界面，即View，在上周的博客中，设计了一个图书管理系统的Model，可根据注释生成 ViewModel 的代码，实现数据绑定的步骤如下：

（1）为界面绑定模型，即将 View 与 ViewModel 关联起来，在AWTK-MVVM中有一个 v-model 属性，该属性用来指定 ViewModel 的名称，将控件与模型绑定起来，通常我们在窗口上指定，XML如下：

<window v-model="book_controller">
...
</window>

(2)为控件绑定数据，即将某些控件的属性与 Model 中的指定属性（变量）绑定起来，这个绑定的具体操作由 ViewModel 完成，我们只需要在XML文件中指定属性即可，例如将 label 控件的文本（text属性）和 Model 中的书名（title属性）绑定，XML如下：

<window v-model="book_controller">
  ...
  <label x="center" y="middle" w="50%" h="40" text="title" v-data:text="{item.title}"/>
  ...
</window>

其中 v-data:text="{item.title}" 的具体说明如下：

• v-data 表示该属性是一个数据绑定规则。
• text 表示控件的属性名称。
• item.title 表示Model中的属性，即变量名称，由于此处绑定的为复合数据，因此使用符号 “.” 来表示。

备注：此处仅做最简单的示例，详细内容请参考awtk-mvvm/docs/data_binding.md

三、命令绑定

命令绑定与数据绑定类似，在AWTK-MVVM中同样通过在XML文件中添加属性完成。AWTK-MVVM中提供一个 v-on 属性，比如添加图书的指令为 “add” ，那么为按钮绑定该指令的XML如下：

<window v-model="book_controller">
  ...
<button name="btn_add" x="132" y="b:25%" w="100" h="36" v-on:click="{add}" text="Add"/>
  ...
</window>

其中 v-on:click="{add}" 的具体说明如下：

• v-on 表示该属性是一个命令绑定规则。
• click 表示绑定一个点击事件。
• add 表示绑定的命令为 add。

目前AWTK-MVVM提供的命令如下，后续还会持续更新：

命令	说明
click	点击事件
pointer_down	指针按下事件
pointer_up	指针松开事件
key_down	按键按下事件
key_long_press	按键长按事
key_up	按键松开事件
global_key_down	全局按键按下事件
global_key_long_press	全局按键长按事件
global_key_up	全局按键松开事件
value_changed	值改变事件
value_changed_by_ui	值（通过 UI 修改）改变事件

备注：此处仅做最简单的示例，详细内容请参考awtk-mvvm/docs/command_binding.md