跳转到内容

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]

华夏公益教科书