用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>