基于jTemplates、ascx协同工作的酷UI模板技术

基于jTemplates、ascx协同工作的酷UI模板技术2011-04-17 博客园 V.Enjoy在很久很久以前，也就是asp.net ajax刚引起大众关注不久，asp.net ajax团队成员ScottGu发布了一篇非常实用的文章：

英文：Tip/Trick: Cool UI Templating Technique to use with ASP.NET AJAX for non-UpdatePanel scenarios ，

中文：技巧和诀窍：在不用UpdatePanel的情形下可与ASP.NET AJAX 使用的酷UI模板技术

看完之后，非常受用，并给我留下了非常深刻的映像，之后在很多场景里都借鉴了 ScottGu的这种方案。如果你也仔细阅读过这篇文章，那么应该可以明白在这种方式中，是如何将客户端繁琐的拼接html字符串或dom片段的工作，借助asp.net领域的ascx用户控件来方便快捷及优雅的完成的。

在EnjooSite的开发过程中，因为涉及到大量的客户端编码，自然少不了大量的客户端页面建构，因此，我便再次应用了ScottGu的这种方案，只不过根据EnjooSite项目的特点，进行了一定程度的优化和改进，同时引入了jTemplates javascript库进行协同工作。

针对jTemplates的特点，以及ScottGu酷UI模板技术的各自优点，我们来看看我是如何改进的：

第一步：熟悉jTemplates的工作方式

widgetContainer.setTemplate（template, null）;
widgetContainer.processTemplate（data）;

jTemplates的工作方式非常直观：

第一句setTemplate（template,null），将jQuery对象widgetContainer设置为可模板化处理对象，模板结构由参数template确定；

第二句processTemplate（data）;则对模板化的对象进行数据呈现处理，实际数据由参数 data确定。

我之所以特别解释这2句，是因为想引起大家注意，jTemplates的工作过程中，有模板和数据这2个重要的概念。

第二步：获取template和data

既然jTemplates需要模板和数据的协同工作，那么我们可以怎样方便、快捷的提供出这2 项内容呢？

template.ascx

1 <div>
2   {#if $T.staticHTMLs.length>0 }
3   {#foreach $T.staticHTMLs as item} 
4   <div id="StaticHTML_{$T.item.id} _Viewer" commandname="enjoosite_statichtml_item" commandargument="{$T.item.id}">{$T.item.description}</div>
5   {#/for}
6   {#/if}
7   <div id="staticHTML_{$T.widgetId}_Pager" class="pager" commandargument="{$T.maxItems}_{$T.listCount}_{$T.pageCount}_ {$T.widgetId}"></div>
8   <div class="enjoosite_widget_auto_action">
9     （function（$）{
10          ensure（{js:"/jquery-pager.1.1.js"},function（e）{buildStaticHtmlPager （"<%= string.Format（"staticHTML_{0}_Pager",WidgetId） %>"）;}）;
11     }）（jQuery）
12   </div>
13 </div>