昨天記錄了如何使用騰訊的模板引擎，今天記錄一下jquery的模板引擎jtemplates。官網：http://jtemplates.tpython.com/

編寫模板：需要在頁面引入jquery和jtemplates（jtemplates是基於jquery的插件）

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-jtemplates.js"></script>

　　　　　使用一個id=""、style="display:none"的textarea標簽存放模板：<textarea

id="commonTemplate" style="display:none"><![CDATA[ 這裏是所需的模板標簽，也就是html標簽 ]]></textarea>

和artTemplate模板不一樣，語法也很不一樣，獲取數據 { $T. };if語句之類的：{#if $T. }；

　　　　　artTemplate的if else很不一樣，{{if 條件判斷}} {{else if 條件判斷 }}{{else if 條件判斷 }}{{/if}}

<textarea id="commonTemplate"
 
 style="display:none">
<![CDATA[
    <i class="icon-userN"></i>
    <span class="name"><span name="{$T.displayName}" >{$T.displayName}</span></span>
    <div class="rightTools" hasCam="{$T.hasCam}" >
    {#if $T.isCompere} 
        {#if $T.hasCam}
        
 
<a class="microphone disabled" onclick=‘audioControl(this,"{$T.userId}")‘ ></a>
        <a class="camera disabled" onclick=‘videoControl(this,"{$T.userId}")‘></a>
        {#/if}
    {#else}
        {#if $T.hasCam}
        <a class="microphone noaudio"></a>
        <a class="camera nocamera"></a>
        {#/if}
    {#/if}
    </div>
    {#if $T.isCompere} 
        <div class="setting">
            <ul>
                <li><a onclick=‘setSpeaker("{$T.userId}","{$T.displayName}")‘>設為主講人</a></li>
                <li><a onclick=‘giveOut("{$T.userId}")‘>請出房間</a></li>
                <li><a onclick=‘rename("{$T.userId}")‘>重命名</a></li>
            </ul>
        </div>
    {#elseif $T.ismySelf}
        <div class="setting">
            <ul>
                <li><a onclick=‘rename("{$T.userId}")‘>重命名</a></li>
            </ul>
        </div>
    {#/if}
]]>
</textarea>

渲染模板：這裏用到的是jtemplates的setTemplateElement("#ID")，指模板容器(這裏是textarea)的ID;

　　　　　processTemplate(obj);模板加載數據，obj就是數據，可以是數組，也可以是對象

 $("#common").setTemplateElement("commonTemplate");
 $("#common").processTemplate(obj);

js模板引擎---jtemplates使用