示例：使用定制 HTML 创建控件

本示例将向您显示如何使用脚本将在定制 HTML 控件中选择的值与 coach 视图的业务数据绑定。

本示例中任务的概述：

向定义选择控件的 Coach 视图添加用于选择帐户类型（例如 Current 或 Savings）的定制 HTML 代码。
向 coach 视图添加业务对象。
使用定制脚本配置事件处理程序（装入），以将选择控件选择的值与复杂类型的业务对象属性绑定。

最终，您将创建一个“帐户类型”选择列表，可复用或扩展该列表然后在多个 Coach 中使用。

开始前，您必须熟悉 Coach 视图应用程序编程接口 (API) 且必须已创建业务对象（请参阅表 2）。

向 coach 视图添加定制 HTML 代码：
1. 在 Toolkit 或流程应用程序中，创建名为 getAccountTypes 的新 coach 视图。
2. 在布局选项卡上，从高级下的选用板中将定制 HTML 项拖到画布中。
3. 在 HTML 下的属性中，选择文本选项然后提供定制 HTML 代码。对于此示例，您可以使用以下代码来定义选择控件：
```
<select name="AccountType" size="1">
  <option value="Savings">Savings Account</option>
  <option value="Current">Current Account</option>
</select>
```
4. 在“概述”页面上，选择可以触发边界事件。
向 coach 视图添加业务对象。
1. 在变量选项卡中，单击业务数据旁边的加号
2. 对于变量类型，选择 TSAPP_ValidateDocumentCaseProperties 业务对象。
3. 在名称字段中，输入 caseProperties。

在“行为”页面上，使用定制脚本将 load 事件处理程序配置为将定制 HTML 选择的值映射到业务数据属性。

注册 coach 视图将动态装入的 Dojo 按钮模块和别名。
1. 在行为选项卡中，选择 AMD 依赖性。
2. 单击添加，然后指定以下信息：
  - 在模块标识列中，输入 dojo/_base/connect。这声明针对 DOM 节点提供事件处理及相关功能的模块上的依赖关系。
  - 在别名列中，输入 connect。这是代码中用于引用连接模块的别名。
  提示：此示例使用基础结构中包含的 AMD 模块。如果尚未包含 AMD 模块，请参阅添加定制 AMD 模块，了解有关如何添加并访问这些模块的信息。

在事件处理程序下，选择装入，然后提供定制脚本。对于此示例，您可以使用以下脚本：

var selectElement = this.context.element.getElementsByTagName("select")[0];

var onChangeHandle = connect.connect(selectElement, "onchange", this, function(newValue){
if(this.context.binding){
var tempBinding = this.context.binding.get("value");
tempBinding.set("TSAPP_AccountType", newValue.target.value);
}
});

表 1. 关于脚本的说明
项	Description
（`this == 该视图对象`）	装入事件具有有效内容数据的上下文以及（在步骤 2 中所添加的）与其相关联的业务数据对象的上下文。
`connect.connect(selectElement, "onchange"`	脚本中的 `onChangeHandle` 变量具有在“选择”控件中选择的新值。使用 `connect.connect` 调用定制 HTML 控件的 `onChange` 事件。提示： `connect.connect(selectElement, "onchange"` 是从 AMD 依赖关系中的 `dojo/_base/connect` 条目的别名中派生的。因此，脚本应该基于别名进行相应地修改。例如，如果 `myConnect` 是别名，那么脚本将类似于 `myConnect.connect(selectElement, "onchange"`。
`this.context.binding.get("value").set("TSAPP_AccountType", newValue.target.value);`	“选择”控件中选择的新值与业务数据特定属性 (TSAPP_AccountType) 绑定。

要测试您的成果，请创建人员服务，然后执行以下操作：
1. 在图选项卡上，添加 coach。
2. 在变量选项卡上，添加 TSAPP_ValidateDocumentCaseProperties 作为输出变量。
3. 在 Coach 选项卡上，选择 coach，将 getAccountTypes coach 视图拖至画布，然后选择 TSAPP_ValidateDocumentCaseProperties 专有变量作为绑定。
4. 在图选项卡上，完成 coach 连线。
5. 单击保存或完成编辑。
6. 运行该人员服务。这将打开一个浏览器并显示选择列表。

引用

表 2. 示例业务对象
库项目	示例名称
业务对象	TSAPP_ValidateDocumentCaseProperties Parameters: TSAPP_Zipcode（字符串） TSAPP_Age（字符串） TSAPP_AccountStatus（字符串） TSAPP_CustomerType（字符串） TSAPP_Name（字符串） TSAPP_City（字符串） TSAPP_AccountType（字符串）