深入了解Dojo Data

深入了解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", "type":"continent", "population":"1 billion", "area": "25,428,192 sq km" }, { "id": "OC", "name":"Oceania", "type":"continent", "population":"21 million", "area": "15,928,294 sq km" }, { "id": "EU", "name":"Europe", "type":"continent", "population":"56 million", "area": "25,928,294 sq km" }, { "id": "NA", "name":"North America", "type":"continent", "population":"100 million", "area": "90,928,294 sq km" }, { "id": "SA", "name":"South America", "type":"continent", "population":"102 million", "area": "78,928,294 sq km" }, { "id": "AN", "name":"Antarctica", "type":"continent", "population":"998", "area": "102,928,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。我们将用它显示数据。

Name Population Area

深入了解Dojo Data_第1张图片
同样的JsonRestStore也能够同时为一个dijit.form.ComboBox提供数据:

深入了解Dojo Data_第2张图片
看,把同一份数据用于不同的UI小部件就是这么简单!

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

Africa 900 million 30,221,532 sq km Asia 1 billion 25,428,192 sq km Oceania 21 million 15,928,294 sq km Europe 56 million 25,928,294 sq km North America 100 million 90,928,294 sq km South America 102 million 78,928,294 sq km Antarctica 998 102,928,294 sq km

 

然后,创建XML数据存储器:

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

 

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

最后,将它交给DataGrid。

Name Population Area

 

同时,更新ComboBox:

 

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

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

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

更多相关资源:

  • RESTful JSON + Dojo Data
  • Easy Exploration of Dojo Data Stores
  • Web Service to dojo.data Store in 4 Easy Steps

 

你可能感兴趣的:(Dojo核心(dojo))