跳轉到內容

XForms/增量模型載入

來自華夏公益教科書,開放的書籍,開放的世界

您有一個大型模型,並且希望在需要時增量載入模型的不同部分。當您有一個多部分表單,並且每個選項卡都需要額外資料時,這通常會完成。僅載入初始選項卡的資料可以保持您的表單載入時間快速,並避免不必要地鎖定共享資料資源。

我們將建立一個具有三個單獨例項的模型,一個用於人員列表,一個用於位置列表,一個用於事物列表。當表單載入時,人員將自動載入到表單中。我們將建立觸發器,這些觸發器將在需要時增量載入模型的其他部分。每個觸發器都將使用提交事件,該事件執行單獨的 HTTP 獲取以將資料增量載入到模型中的單獨例項中。

以下是模型中用於位置的空佔位符例項以及用於獲取位置資料的提交。

<xf:instance id="places">
  <null/>
</xf:instance>
<xf:submission id="get-places" method="get" action="places.xml"
  replace="instance" instance="places"/>

以下是獲取新模型的觸發器(按鈕)。

<xf:submit submission="get-places">
  <xf:label>Load Places</xf:label>
</xf:submit>

螢幕影像

[編輯 | 編輯原始碼]

以下是前後螢幕影像。前一個螢幕影像是表單最初載入時的影像。後一個影像是使用者按下兩個觸發器以載入位置和事物後的影像。

模型完全載入之前
模型完全載入之後

以上示例旨在非常容易地看到事件觸發時資料是如何載入的。實際上,多選項卡表單中的每個選項卡可能有一些資料,只有在使用者點選該選項卡時才需要。這是動態模型載入的完美用途。以下示例說明了這種最佳實踐。

注意,事件日誌不會重新載入模型資料

載入 XForms 應用程式

[編輯 | 編輯原始碼]

具有手動載入增量資料的觸發器的示例:載入 XForms 應用程式

具有增量載入資料的選項卡選擇事件的示例 載入 XForms 應用程式

注意,在此示例中,事件日誌顯示資料僅載入一次,無論選項卡被選擇多少次。

避免重新載入

[編輯 | 編輯原始碼]

以下是如何使用條件操作來檢查模型中的例項是否已將其資料載入到表單中的示例

<xf:case id="places-case">
   <xf:action ev:event="xforms-select" if="not(instance('places')/place)">
     <xf:send submission="get-places"/>
   </xf:action>
   <h2>Places</h2>
</xf:case>

xf:actionif 屬性檢查 places 例項中是否至少有一個位置。如果沒有至少一個“位置”,則會觸發提交事件。

示例程式碼

[編輯 | 編輯原始碼]
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xf="http://www.w3.org/2002/xforms"
  xmlns:ev="http://www.w3.org/2001/xml-events">
 <head>
  <title>Incremental Model Loading</title>
  <style type="text/css">body {font-family: Helvetica, Arial, sans-serif;</style>
  <xf:model>
   <!-- unconditionally loaded when the form loads -->
   <xf:instance id="people" src="people.xml">
     <null/>
   </xf:instance>
   
    <xf:instance id="places">
    <null/>
   </xf:instance>
   <xf:submission id="get-places" method="get" action="places.xml"
    replace="instance" instance="places"/>
   
    <xf:instance id="things">
    <null/>
   </xf:instance>
   <xf:submission id="get-things" method="get" action="things.xml"
    instance="things" replace="instance"/>
    
  </xf:model>
 </head>

 <body>    
  <h1>Incremental Model Loading</h1>
  <p>Not all parts of the model need to be loaded into a form when it is first loaded. For
  large models, different sections can be loaded as they are needed.</p>

  <h2>People</h2>
   <xf:group ref="instance('people')">
     <xf:repeat nodeset="person">
      <xf:output ref="name"/><br/>
    </xf:repeat>
   </xf:group>
   
   <h2>Places</h2>
   <xf:group ref="instance('places')">
     <xf:repeat nodeset="place">
      <xf:output ref="name"/><br/>
    </xf:repeat>
    <xf:submit submission="get-places">
      <xf:label>Load Places</xf:label>
     </xf:submit>
   </xf:group>
   
   <h2>Things</h2>
   <xf:group ref="instance('things')">
     <xf:repeat nodeset="item">
      <xf:output ref="name"/><br/>
     </xf:repeat>
     <xf:submit submission="get-things">
      <xf:label>Load Things</xf:label>
     </xf:submit>
   </xf:group>

 </body>
</html>

XML 例項樣本

[編輯 | 編輯原始碼]

[people.xml] [places.xml] [things.xml]

華夏公益教科書