展現一條一條的二維關系的數據，我們可以使用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¶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,兩者如何同時調用一個數據源？
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); 結果是“undefined”
如果是獲取DataModel，那應該用View對象。出現undefined的原因是load()是異步的，你必須先等待數據load完。如：

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

詳見http://www.yui-ext.com/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圖

JavaScript技術：學習YUI.Ext 第七天--關于View&JSONView，轉載需保留來源！

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