展現(xiàn)一條一條的二維關(guān)系的數(shù)據(jù)，我們可以使用GIRD組件。 但有些場合，如產(chǎn)品展示，畫冊，我們可以使用View組件，來展示“矩陣”式的數(shù)據(jù)。 View的數(shù)據(jù)源來自DataModel對象，即包含XMLDataModel和JSONDataModel。盡管View支持JSON,但如果不是用于DataModel，View的子類JSONView更適用，因?yàn)樗峁└嗟氖录头椒āＲ话銇碚f，View用于XML數(shù)據(jù)源；JSONView用于JSON數(shù)據(jù)源。

View如何工作？

記得以前如何輸出一個(gè)記錄嗎？以網(wǎng)上商店為例子；以前是這樣輸出一個(gè)商品的：

<%
.....
//下列服務(wù)端代碼為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)服務(wù)。View工作原理也一樣，只不過把以前Sever做的事情搬到Cilent來，依靠View來處理（實(shí)質(zhì)上是Domhelper的模版），讓瀏覽器最終渲染輸出。

需要你的幫忙：Domhelper

如上述，View的工作離不開DomHelpr。DomHelpr在這里提供"模版Template",并將其編譯。見下面代碼：

//新建一個(gè)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'
});
//又或者隱式創(chuàng)建Template對象
var view = new YAHOO.ext.View('my-element',
'<div id="{0}">{2} - {1}</div>', // auto create template
dataModel, {
singleSelect: true,
selectedClass: 'ydataview-selected'
});

 

加載數(shù)據(jù)

VIEW加載數(shù)據(jù)的方式與JSONView的有所不同：VIEW采用DataModel的load(),JSONView采用UpateManager的load()。下面重點(diǎn)說說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,//超時(shí)

scripts: false

});

只有url參數(shù)是不可缺省的，其它如 nocache, text and scripts都是可選的。 text和scripts是與UpdateManger實(shí)例關(guān)聯(lián)的參數(shù)

• 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使用點(diǎn)滴

a.有一個(gè)gird和JSONView,兩者如何同時(shí)調(diào)用一個(gè)數(shù)據(jù)源？
1.改變jsonData屬性; 2.Call refresh(); 見http://www.yui-ext.com/forum/viewtopic.php?t=1968

b.分頁
分頁視乎還沒有什么好的方案，JACK只提供下面的思路：
JsonView extends View. View supports using a JSONDataModel. It won't render a paging toolbar for you, but it will loadPage() and standard DataModel functionality. The view will automatically update when you load new data. If you want named template parameters (like JsonView), you will need to remap the indexes (DataModel style) to named parameters. See the YAHOO.ext.View docs for more info on that.
http://www.yui-ext.com/forum/viewtopic.php?t=2340

c.如何JSONView的獲取整個(gè)DataModel而不是字段？我每次用alert(mainView.jsonData); 結(jié)果是“undefined”
如果是獲取DataModel，那應(yīng)該用View對象。出現(xiàn)undefined的原因是load()是異步的，你必須先等待數(shù)據(jù)load完。如：

mainView.el.getUpdateManager().on('update', function(){
alert(mainView.jsonData);
});

詳見http://www.yui-ext.com/forum/viewtopic.php?t=1209

 

d.學(xué)習(xí)例子。范例Image Chooser本身就是一個(gè)好的學(xué)習(xí)例子

JSON Format

您可能認(rèn)為服務(wù)輸出這樣的JSON：

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

是正確無誤的。但不對，它是不能被處理的。正確的格式應(yīng)該是：

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

注意方括號內(nèi)聲明的是數(shù)組類型，View渲染方式實(shí)際是與DataModel一致的

本文轉(zhuǎn)自:http://www.ajaxjs.com/yuicn/article.asp?id=20070209

---------------------------------------------------------------------------------------------------------------------------------
說人之短，乃護(hù)己之短。夸己之長，乃忌人之長。皆由存心不厚，識量太狹耳。能去此弊，可以進(jìn)德，可以遠(yuǎn)怨。
http://m.tkk7.com/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------