示例：使用定制 HTML 创建视图

在线编辑

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

本示例中任务的概述：

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

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

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

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

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

注册视图将动态装入的 Dojo 按钮模块和别名。
1. 在 " 行为 " 页面中，选择 AMD 依赖关系。
2. 单击添加，然后指定以下信息:
  - 在模块标识列中，输入 dojo/_base/connect。这声明针对 DOM 节点提供事件处理及相关功能的模块上的依赖关系。
  - 在别名列中，输入 connect。这是代码中用于引用 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. 关于脚本的说明
项目	描述
(`此 == 视图对象`)	装入事件具有有效内容数据的上下文以及与其关联的业务数据对象的上下文 (在步骤 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. 在 " 图 " 页面中，添加页面。
2. 在“变量”页面上，添加 TSAPP_ValidateDocumentCaseProperties 作为输出变量。
3. 选择页面，将 getAccountTypes 视图拖至画布，然后选择 TSAPP_ValidateDocumentCaseProperties 专有变量作为绑定。
4. 在“图”页面中，完成页面连线。
5. 单击保存或完成编辑。
6. 运行该人员服务。这将打开一个浏览器并显示选择列表。

引用

表 2. 示例业务对象
库项目	示例名称
业务对象	TSAPP_ValidateDocumentCaseProperties 参数： TSAPP_Zipcode (字符串) TSAPP_Age (字符串) TSAPP_AccountStatus (字符串) TSAPP_CustomerType (字符串) TSAPP_Name (字符串) TSAPP_City (字符串) TSAPP_AccountType (字符串)