深入了解Dojo Data

——译自http://www.sitepen.com/blog/2010/10/13/dive-into-dojo-data/

使用Dojo Data有助于快速创建Web应用的界面，且易于嵌入各种数据源。它在用户界面与底层数据之间提供了一层抽象层，使得用户界面开发人员能够专注于UI的开发，而无需担心数据库、服务器、或者数据格式的唯一性。

在接下来的例子里，我们将用一个JsonRestStore为DataGrid提供数据。然后，我们将用一个XmlStore替换这个JsonRestStore，以显示UI和数据源的解耦所带来的便利。

数据以JSON的方式表示：

dataItems = [ { "id": "AF","name":"Africa","type":"continent","population":"900 million","area": "30,221,532 sq km" },{ "id": "AS","name":"Asia","population":"1 billion","area": "25,428,192 sq km" },{ "id": "OC","name":"Oceania","population":"21 million","area": "15,928,294 sq km" },{ "id": "EU","name":"Europe","population":"56 million",{ "id": "NA","name":"North America","population":"100 million","area": "90,{ "id": "SA","name":"South America","population":"102 million","area": "78,{ "id": "AN","name":"Antarctica","population":"998","area": "102,294 sq km" } ];
小提示：可以到jsonlint.org 验证JSON格式的正确性。

JsonRestStore需要与一个数据服务相连。本例中我们只创建一个模拟服务。注意为了简单起见，我们将省略"query"这个参数，返回所有的数据项。

var mockService = function(query){ var d = new dojo.Deferred(); d.fullLength = dataItems.length; d.callback(dataItems); return d; };

下一步，我们用一个服务函数和一个目标URL来创建JsonRestStore。同样，对于这个例子而言我们将省略"target"参数。这个残水对于今后开发真正的REST服务非常重要，但现在暂时不需要。
jsonStore = new dojox.data.JsonRestStore({ service: mockService,target: ‘/some/url’ });

JsonRestStore适用于比较大型的数据集。对于这种数据集，你往往不想（或根本不可能）高效地将其完全传送到客户端。JsonRestStore能够很好地处理与服务器端的交互。

最后，我们来声明一个dojox.grid.DataGrid。我们将用它显示数据。
<table jsid="grid" store="jsonStore" query="{name:’*'}" dojoType="dojox.grid.DataGrid" class="grid"> <thead> <tr> <th field="name" width="auto">Name</th> <th field="population" width="auto">Population</th> <th field="area" width="auto">Area</th> </tr> </thead> </table>

同样的JsonRestStore也能够同时为一个dijit.form.ComboBox提供数据：
<input dojoType="dijit.form.Combo<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" store="jsonStore" searchAttr="name"></input>

看，把同一份数据用于不同的UI小部件就是这么简单！

接下来，我们用一个XmlStore来换下这个JsonRestStore，看看转换数据格式有多简单。数据文件如下：

<continents> <continent> <name>Africa</name> <population>900 million</population> <area>30,532 sq km</area> </continent> <continent> <name>Asia</name> <population>1 billion</population> <area>25,192 sq km</area> </continent> <continent> <name>Oceania</name> <population>21 million</population> <area>15,294 sq km</area> </continent> <continent> <name>Europe</name> <population>56 million</population> <area>25,294 sq km</area> </continent> <continent> <name>North America</name> <population>100 million</population> <area>90,294 sq km</area> </continent> <continent> <name>South America</name> <population>102 million</population> <area>78,294 sq km</area> </continent> <continent> <name>Antarctica</name> <population>998</population> <area>102,294 sq km</area> </continent> </continents>

然后，创建XML数据存储器：

xmlStore = new dojox.data.XmlStore({ url: ‘continents.xml’,label: ‘name’ });

XmlStore是一个客户端的数据存储器，用于读取XML数据源。它由Dojo官方提供并包含在DojoX子项目中。XmlStore为基本的XML数据（一种常用的数据交换格式）提供读/写接口。XmlStore可以用于一般的XML文档，因此非常有用。存储器的设计是你可以通过覆盖其部分方法来自定义读/写数据的行为。

最后，将它交给DataGrid。

<table jsid="grid" store="xmlStore" dojoType="dojox.grid.DataGrid" class="grid"> <thead> <tr> <th field="name" width="auto">Name</th> <th field="population" width="auto">Population</th> <th field="area" width="auto">Area</th> </tr> </thead> </table>

同时，更新ComboBox：

<input dojoType="dijit.form.Combo<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" store="xmlStore" searchAttr="name"></input>

我们不需要修改关于Grid和ComboBox的任何代码，就能让它们继续工作。唯一需要做的改动，就是声明一个数据源，并将它设置为grid的输入。我们不需要操心任何关于数据获取、解析、以及管理的事情，数据存储器的API做了所有的工作！

除此之外还有其他许多有用的数据存储器，包括CsvStore，FileStore，FlickrStore，JsonQueryRestStore，PersevereStore，ServiceStore，WikipediaStore，等等。如果需要一个完整列表，请参见dojox.data目录

Dojo Data是一个强大而灵活的工具。数据存储器使得切换前端组件和后端实现都变得很容易，不需要改变许多代码。因此我们可以为同一个数据存储器很方便地更换前端Diji部件，另外，同一个数据存储器也能由页面上的多个Dijit部件、图表或grid同时使用。

更多相关资源：

原文链接：https://www.f2er.com/dojo/291760.html

深入了解Dojo Data

深入了解Dojo Data

猜你在找的Dojo相关文章