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

一、前言

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

在进行数据绑定之前，先要建立 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}" 的具体说明如下：

命令绑定与数据绑定类似，在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}" 的具体说明如下：

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