在第 3 部分中,将了解如何自定义和扩展 Dojo Mobile 1.8 结构">数据处理器,并了解如何创建和注册一个自定义内容处理器。
本系列的 第 1 部分 和 第 2 部分 介绍了 Dojo Mobile 1.8 中的许多新小部件和小部件增强。本系列的最后这篇文章另辟蹊径,介绍 Dojo Mobile 1.8 的新的数据处理器功能。
ListItem 和 IconItem 等项目小部件有一个 url 属性,可使用该属性加载指定的外部视图内容,动态创建一个新目标视图。当用户选择项目小部件时,会加载和创建这个新视图。目前为止,Dojo Mobile 仅支持两种数据格式的视图内容:HTML 和 JSON(JavaScript Object Notation,JavaScript 对象表示法)。它通过两个内容处理器 来提供此支持,一个用于 HTML 片段,另一个用于 JSON 数据。
Dojo Mobile 1.8 中的数据处理器已重构为可自定义和可扩展的处理器。在本文中,将会了解这个新结构的组成部分,以及该数据处理器的数据和控制流,还会了解如何以编程方式调用数据处理器。然后,借助示例代码,您将学习如何创建和注册一个自定义内容处理器。
一个基本示例
清单 1 显示了一个利用 ListItem 的 url 属性打开两个外部视图的示例:
清单 1. 利用 url 属性打开外部视图
<ul dojoType="dojox.mobile.RoundRectList"> <li dojoType="dojox.mobile.ListItem" url="view1.html"> Open External View (HTML) </li> <li dojoType="dojox.mobile.ListItem" url="view2.json"> Open External View (JSON) </li></ul>
清单 2 显示了一些外部 HTML 内容 (view1.html),它被指定为 清单 1 中第一个 url 属性的值:
清单 2. 外部视图内容 (view1.html)
<div id="view1" dojoType="dojox.mobile.View"> <h1 dojoType="dojox.mobile.Heading" back="Home" moveTo="home">view1.html</h1> <ul dojoType="dojox.mobile.EdgeToEdgeList"> <li dojoType="dojox.mobile.ListItem"> Jack Coleman </li> <li dojoType="dojox.mobile.ListItem"> James Evans </li> <li dojoType="dojox.mobile.ListItem"> Jason Griffin </li> </ul></div>
清单 3 显示了 JSON 内容 (view2.json),它被指定为 清单 1 中第二个 url 属性的值:
清单 3. 外部视图内容 (view2.json)
{ "dojox.mobile.View": { "@id": "view2", "dojox.mobile.Heading": { "@back": "Home", "@moveTo": "home", "@label": "view2.json" }, "dojox.mobile.EdgeToEdgeList": { "dojox.mobile.ListItem": [{ "@label": "Jack Coleman" }, { "@label": "James Evans" }, { "@label": "Jason Griffin" }] } }}
图 1 表明,来自 view1.html 的外部 HTML 内容 (清单 2) 会在用户单击 清单 1 中创建的第一个 ListItem 时打开:
图 1. 动态加载的 HTML 内容
在 Dojo Mobile 1.7 和更低版本中,HTML 和 JSON 的内容处理器是硬编码的,没有自定义空间。在 Dojo Mobile 1.8 中,这些处理器经过了重构和分离,以实现自定义。