使用 JavaScript 让 XForms 变得更健壮

　　本文示例源代码或素材下载

　　先决条件

　　本文只基于 XForms 和 JavaScript。针对安装在 Mozilla Firefox 2.0 之上的 Mozilla XForms 插件 进行测试。使用的是标准的 XForms 和 JavaScript，因此应该在这两个标准技术的其他实现上运行。没有使用服务器端的技术。

　　典型的表示例

　　我们来看一个典型的 XForms 示例。它展示了如何创建表示 XML 文档中重复节点的表。尤其展示了如何使用 XForms 执行聚集计算以及如何使用 XForms 添加或删除模型数据的节点，同步地自动保存视图。查看清单 1 中的完整源代码。

　　清单 1. 典型的 XForms 表示例<?xml version="1.0" encoding="UTF-8"?>
<xhtml:html xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
　　<xhtml:head>
　　　　<xhtml:title>Demonstration of table with
　　　　　　　　　　　　　　　　　　　column total</xhtml:title>
　　　　<xf:model id="my-model" xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
　　　　　　<xf:instance id="my-data" src="my-data.xml" xmlns=""/>
　　　　　　<xf:bind calculate="sum(../Item/Amount)" nodeset="/Data/Total"/>
　　　　　　<xf:submission action="my-data.xml" id="update-from-local-file"
instance="my-data" method="get" replace="instance"/>
　　　　　　<xf:submission action="my-data.xml" id="view-xml-instance"
method="get"/>
　　　　　　<xf:submission action="my-data.xml" id="save-to-local-file"
method="put"/>
　　　　</xf:model>
　　</xhtml:head>
　　<xhtml:body>
　　　　<xf:group ref="/Data" xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
　　　　　　<xf:label/>
　　　　　　<xf:repeat id="repeatItem" nodeset="Item"
xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　<xf:input class="item-description" id="description-input"
ref="Description" xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　　　<xf:label/>
　　　　　　　　</xf:input>
　　　　　　　　<xf:input class="item-amount" ref="Amount"
xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　　　<xf:label/>
　　　　　　　　</xf:input>
　　　　　　</xf:repeat>
　　　　　　<xhtml:div id="sum">
　　　　　　<xf:output ref="/Data/Total" xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　<xf:label/>
　　　　　　</xf:output>
　　　　　　</xhtml:div>
　　　　　　<xf:trigger id="insertbutton" xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　<xf:label>Add Item</xf:label>
　　　　　　　　<xf:action ev:event="DOMActivate">
　　　　　　　　　　<xf:insert at="last()" nodeset="Item[last()]"
position="after"/>
　　　　　　　　　　<xf:setvalue ref="Item[last()]/Description" value="''"/>
　　　　　　　　　　<xf:setvalue ref="Item[last()]/Amount" value="0"/>
　　　　　　　　　　<xf:setfocus control="description-input"/>
　　　　　　　　</xf:action>
　　　　　　</xf:trigger>
　　　　　　<xf:trigger id="delete" xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　<xf:label>Delete Item</xf:label>
　　　　　　　　<xf:delete at="index('repeatItem')" ev:event="DOMActivate"
nodeset="Item[index('repeatItem')]"/>
　　　　　　</xf:trigger>
　　　　　　<xf:submit submission="update-from-local-file"
xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　<xf:label>Reload</xf:label>
　　　　　　</xf:submit>
　　　　　　<xf:submit submission="save-to-local-file"
xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　<xf:label>Save</xf:label>
　　　　　　</xf:submit>
　　　　　　<xf:submit submission="view-xml-instance"
xmlns="http://www.w3.org/1999/xhtml">
　　　　　　　　<xf:label>View XML Instance</xf:label>
　　　　　　</xf:submit>
　　　　</xf:group>
　　</xhtml:body>
</xhtml:html>