展现一条一条的二维关系的数据，我们可以使用GIRD组件。 但有些场合，如产品展示，画册，我们可以使用View组件，来展示“矩阵”式的数据。 View的数据源来自DataModel对象，即包含XMLDataModel和JSONDataModel。尽管View支持JSON,但如果不是用于DataModel，View的子类JSONView更适用，因为它提供更多的事件和方法。一般来说，View用于XML数据源；JSONView用于JSON数据源。

View如何工作？

记得以前如何输出一个记录吗？以网上商店为例子；以前是这样输出一个商品的：

<% ..... //下列服务端代码为ASP using JScript（依然是JS，I'm a big JS Fan^^） var str =""; str+="<td><div id='title'>"; str+=rs("title")+"<\/div>"; str+="<img src="+rs("thumb_image")+">"; str+="<\/td>" Resposne.Write(str); .....%>

很明显，我们最终目的还是要输出HTML,为浏览器渲染(Render)服务。View工作原理也一样，只不过把以前Sever做的事情搬到Cilent来，依靠View来处理（实质上是Domhelper的模版），让浏览器最终渲染输出。

需要你的帮忙：Domhelper

如上述，View的工作离不开DomHelpr。DomHelpr在这里提供"模版Template",并将其编译。见下面代码：

//新建一个Template对象var tpl = new YAHOO.ext.Template(
'<div class="entry">' +
'<a class="entry-title" href="{link}">{title}</a>' +
'<h4>{date} by {author} | {comments} Comments</h4>{description}' +
'</div><hr />'
);tpl.compile(); //compile()的方法，可带来DOM性能的增益var moreView = new YAHOO.ext.JsonView('entry-list', tpl, { jsonRoot: 'posts'});//又或者隐式创建Template对象var view = new YAHOO.ext.View('my-element', '<div id="{0}">{2} - {1}</div>', // auto create template dataModel, { singleSelect: true, selectedClass: 'ydataview-selected' });

加载数据

VIEW加载数据的方式与JSONView的有所不同：VIEW采用DataModel的load(),JSONView采用UpateManager的load()。下面重点说说JSONView的load()方法：

view.load({ url: 'your-url.php',
params: {param1: 'foo', param2: 'bar'}, // 可以是URL encoded字符
callback: yourFunction,
scope: yourObject, //(optional scope)
discardUrl: false,
nocache: false,
text: 'Loading...',//loading之提示文字
timeout: 30,//超时
scripts: false
});

只有url参数是不可缺省的，其它如 nocache, text and scripts都是可选的。 text和scripts是与UpdateManger实例关联的参数

• params : String/Object (optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
• callback : Function (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
• discardUrl : Boolean (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.

JSONView使用点滴

a.有一个gird和JSONView,两者如何同时调用一个数据源？
1.改变jsonData属性; 2.Call refresh(); 见http:///forum/viewtopic.php?t=1209

d.学习例子。范例Image Chooser本身就是一个好的学习例子

JSON Format

您可能认为服务输出这样的JSON：

{"user": {"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}}

是正确无误的。但不对，它是不能被处理的。正确的格式应该是：

{"user":[{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]}

注意方括号内声明的是数组类型，View渲染方式实际是与DataModel一致的

最后，提供一幅Veiw的UML图