使用 JavaScript 让 XForms 变得更健壮

触发 JavaScript

既然已经编写了智能的 JavaScript 函数处理删除，只需修改 XForm，使它在调用到 Delete Item 按钮时调用此 JavaScript 就可大功告成了。为此，只需修改 Delete Item 的 XForms 声明，如清单 4 所示。

清单 4. 新的 XForm delete item 控件<xf:trigger id="delete" xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　<xf:label>Delete Item</xf:label>
　　　　　　　　<xf:load ev:event="DOMActivate"
resource="javascript:deleteItem()"/>
　　　　　　</xf:trigger>

注意，您只是将 XForms delete 命令替换为引用 deleteItem() JavaScript 函数的 load 命令。这是最后一个需要修改的地方。现在我们来运行一下修改后的示例。

运行修改后的示例

简单地将示例加载到浏览器中。显示的内容与 图 1 中原来显示的一样。但是，当您删除至最后一行并单击 Delete Item 后，您应看到图 4 所示的结果。

图 4. 删除最后一行

现在最后一行没有消失。而是变为默认值。如果单击 Add Item 按钮，您将看见类似图 5 的内容。

图 5. 删除最后一个 Item 后添加 Item

Add Item 按钮仍然有效，没有什么变化。

您已经了解了如何使用 JavaScript 创建更智能的 delete item 动作。更重要的是，您了解了如何使用 JavaScript 访问和修改 XForms 模型数据，重新计算 XForms 绑定的计算，以及刷新 XForms 视图。您可以想像几种其他方法，使 Add Item 和 Delete Item 动作提供越来越复杂的功能。希望您也能够发现如何使用这些技术改进您自己的基于 XForms 的应用程序。