展現(xiàn)一條一條的二維關(guān)系的數(shù)據(jù)，我們可以使用GIRD組件。 但有些場合，如產(chǎn)品展示，畫冊，我們可以使用View組件，來展示“矩陣”式的數(shù)據(jù)。 View的數(shù)據(jù)源來自DataModel對象，即包含XMLDataModel和JSONDataModel。盡管View支持JSON,但如果不是用于DataModel，View的子類JSONView更適用，因為它提供更多的事件和方法。一般來說，View用于XML數(shù)據(jù)源；JSONView用于JSON數(shù)據(jù)源。

View如何工作？

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

<%		.....		//下列服務(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來處理（實質(zhì)上是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'});//又或者隱式創(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()。下面重點說說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參數(shù)是不可缺省的，其它如 nocache, text and scripts都是可選的。 text和scripts是與UpdateManger實例關(guān)聯(lián)的參數(shù)

• params : String/Object (optional) The parameters to pass as either a url encoded string "param1=1¶m2=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,兩者如何同時調(diào)用一個數(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的獲取整個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本身就是一個好的學(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渲染方式實際是與DataModel一致的

最后，提供一幅Veiw的UML圖

JavaScript技術(shù)：學(xué)習(xí)YUI.Ext 第七天--關(guān)于View&JSONView，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。