SysUIDataView
為了解決展示數據的問題我們需要用到一個全新的客戶端控件那就是SysUIDataView了簡稱DataView我們會用DataView替換掉上一篇文章中所說到的人手拼接HTML的部分用於迭代生成一個ul中的li元素因此看起來是把DataView當作Repeater來用實際上DataView的功能類似於ListView加上DetailsView
如果你把一個Array綁定到DataView上它會顯示為一個ListView與ListView的LayoutTemplate相類似的是它也能夠定義控件展示的整體布局並且僅僅是迭代輸出其中的一小部分例如說編寫一個有thead的table並且僅僅是迭代輸出thead之後的tr在這方面是DataView和ListView完全一致的唯一不同的是客戶端暫時還沒有DataPager這樣的控件所以DataView必須一次性的完整顯示整個Array的數據
如果你把單個Object綁定到DataView上它就會顯示為一個DetailsView這使得你可以使用兩個DetailsView就做出經典的MasterDetails展示模式和在服務器端分別用ListView和DetailsView做出來的一樣當然你不能指望DataView能夠好像DetailsView那樣自動幫你分析每一個數據項並映射出對應的HTML模板因此HTML模板還是要你自己手寫的但至少那是在HTML中編寫模板編寫時能夠享受IDE帶來的各種好處維護時也更容易看懂自己（或別人）原來寫下的HTML
JavaScript語法
接下來我們就要把DataView投入到實際應用中去了首先我們說一下如何用JavaScript來實例化一個DataView有編寫ASPNET AJAX客戶端代碼經驗的人對$create應該不會覺得陌生因為DataView繼承自SysUIControl我們仍然可以用$create來實例化它不過在此之前我們先要把對應的HTML編寫好
<ul id=
itemTemplate
class=
sysTemplate
>
<li>
<span class=
award
>{{ Award }}</span>
<span class=
winner
>{{ Winner }}</span>
<span class=
film
>{{ Film }}</span>
</li>
</ul>
然後我們就可以基於itemTemplate這個HTML元素創建控件了
$create(Sys
UI
DataView
{
dataSource: new Sys
Data
AdoDataSource()
serviceUri:
WebDataService
svc
query:
OscarWinners
}
{}
{}
$get(
itemTemplate
));
現在頁面顯示出來的結果和之前我們人手拼接HTML的版本完全一致不過我們已經不在需要維護嵌入在JavaScript中的HTML代碼了
聲明性語法
如果你覺得上面的做法還不夠好要在pageLoad()裡面寫一個$create那麼聲明性語法可能正是你需要的大家應該記得很久很久之前在ASPNET AJAX還叫做Atlas的時候就已經有過聲明性語法的設計那就是xmlscript不知為何後來Microsoft放棄了這一設計現在聲明性語法又回來了而且設計得比以前的xmlscript還要更好假如不用$create的話通過聲明性語法實例化一個DataView僅需要這樣做
<body
xmlns:sys=javascript:Sys
xmlns:dataView=javascript:SysUIDataView
sys:activate=*>
<ul id=itemTemplate class=sysTemplate
sys:attach=dataView
dataView:datasource={{ new SysDataAdoNetDataSource() }}
dataView:serviceuri=WebDataServicesvc
dataView:query=OscarWinners>
<li>
<span class=award>{{ Award }}</span>
<span class=winner>{{ Winner }}</span>
<span class=film>{{ Film }}</span>
</li>
</ul>
</body>
我們所需要更改的代碼包括
在body元素上聲明有關的xmlns將JavaScript中的名字空間映射到HTML上或者你可以理解為映射到XML/XHTML上
通過sys:activate=*這個聲明讓ASPNET AJAX知道它需要去解釋頁面上所有的聲明性語法並激活對應的組件
將原本使用$create初始化時傳遞給實例的屬性事件引用改為用聲明性語法直接寫在HTML元素的定義上
經過這三步我們就可以將原來使用$create創建的組件改為使用聲明性語法創建了
小結
DataView使得我們能夠使用HTML模板來避免手工拼接HTML帶來的種種問題同時聲明性語法讓我們能夠如同聲明服務器端控件一樣聲明客戶端組件雖然在ASPNET AJAX Preview 中這些功能仍有小bug例如我想用聲明性語法創建我自己編寫的InPlaceEditoBehavior這在初始化階段毫無問題但卻會在頁面卸載銷毀對象之時拋出腳本錯誤
由於我覺得ASPNET AJAX Preview 很快就要出來了所以我也就不准備去深入研究Preview 了等Preview 出來了再去好好看看源代碼如果你有興趣關注這方面的技術文章歡迎訂閱我的博客點擊側欄上的訂閱鏈接就可以了
From:http://tw.wingwit.com/Article/program/net/201311/15515.html
