|
|
展現(xiàn)一條一條的二維關(guān)系的數(shù)據(jù)，我們可以使用GIRD組件。 但有些場(chǎng)合，如產(chǎn)品展示，畫(huà)冊(cè)，我們可以使用View組件，來(lái)展示“矩陣”式的數(shù)據(jù)。 View的數(shù)據(jù)源來(lái)自DataModel對(duì)象，即包含XMLDataModel和JSONDataModel。盡管View支持JSON,但如果不是用于DataModel，View的子類(lèi)JSONView更適用，因?yàn)樗峁└嗟氖录头椒āＲ话銇?lái)說(shuō)，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工作原理也一樣，只不過(guò)把以前Sever做的事情搬到Cilent來(lái)，依靠View來(lái)處理（實(shí)質(zhì)上是Domhelper的模版），讓瀏覽器最終渲染輸出。
需要你的幫忙：Domhelper
如上述，View的工作離不開(kāi)DomHelpr。DomHelpr在這里提供"模版Template",并將其編譯。見(jiàn)下面代碼：
//新建一個(gè)Template對(duì)象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()的方法，可帶來(lái)DOM性能的增益var moreView = new YAHOO.ext.JsonView('entry-list', tpl, { jsonRoot: 'posts'});//又或者隱式創(chuàng)建Template對(duì)象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)說(shuō)說(shuō)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¶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使用點(diǎn)滴
a.有一個(gè)gird和JSONView,兩者如何同時(shí)調(diào)用一個(gè)數(shù)據(jù)源？
1.改變jsonData屬性; 2.Call refresh(); 見(jiàn)http://www.yui-ext.com/forum/viewtopic.php?t=1968
b.分頁(yè)
分頁(yè)視乎還沒(méi)有什么好的方案，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對(duì)象。出現(xiàn)undefined的原因是load()是異步的，你必須先等待數(shù)據(jù)load完。如：
mainView.el.getUpdateManager().on('update', function(){ alert(mainView.jsonData); });詳見(jiàn)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"}} 是正確無(wú)誤的。但不對(duì)，它是不能被處理的。正確的格式應(yīng)該是：
{"user": [{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}]} 注意方括號(hào)內(nèi)聲明的是數(shù)組類(lèi)型，View渲染方式實(shí)際是與DataModel一致的
最后，提供一幅Veiw的UML圖
JavaScript技術(shù)：學(xué)習(xí)YUI.Ext 第七天--關(guān)于View&amp;JSONView，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
