使用 JavaScript 让 XForms 变得更健壮

核心提示： 图 2. 删除了一个项目注意，不仅是删除了顶部的项目，使用 JavaScript 让 XForms 变得更健壮(3)，而且项目总数也重新进行了计算，这很好地说明了 XForms 的强大功能，您将只修改对 Delete Item 按钮的调用，因此无需更改 Add Item 按钮，再单击 De

图 2. 删除了一个项目

注意，不仅是删除了顶部的项目，而且项目总数也重新进行了计算。这很好地说明了 XForms 的强大功能。再单击 Delete Item 按钮四次，您应看到类似图 3 的内容。

图 3. 删除了所有项目

这不怎么好看，但是可以单击 Add Item 按钮开始重新输入数据，对吧？但结果是在这种情况下单击 Add Item 按钮不起任何作用。

问题出在哪儿？

为什么 Add Item 在这种情况下不起作用？如果您查看 源代码，Add Item 按钮导致向模型中进行插入，使用 XForms 插入命令添加一条记录。而那条记录刚好是一个 “Item” 节点，因此 Add Item 操作接着为 Item 的 Description 和 Amount 节点设置一些默认值。Add Item 通过实际上克隆结构中的最后一个节点以定义插入节点的类型。nodeset="Item[last()]" 正是实现此操作。这正是 “bug” 的来源。如果您消除了所有项目，那么就没有节点可供克隆因而也就无法执行插入。因此 Add Item 按钮会失效。当然，现在的问题是，如何修正这个问题？

修正

正如软件工程中的大多数问题一样，有很多方法可以解决此处描述的问题。这里要阐述的解决方案是使用 JavaScript。您的策略是更改删除的方式。在 清单 1 中您会发现 Delete Item 按钮使用了 XForms 删除命令。您将使用对一个 JavaScript 函数的调用替代对此命令的调用。该函数需要与 XForm 模型交互。您将只修改对 Delete Item 按钮的调用，因此无需更改 Add Item 按钮。我们来查看一下 JavaScript 解决方案。