js模板引擎---jtemplates使用

Posted 2020-09-30 秦大傻&&马二哈

昨天记录了如何使用腾讯的模板引擎，今天记录一下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);