js模板引擎---jtemplates使用

Posted 秦大傻&&马二哈

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js模板引擎---jtemplates使用相关的知识,希望对你有一定的参考价值。

昨天记录了如何使用腾讯的模板引擎,今天记录一下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使用的主要内容,如果未能解决你的问题,请参考以下文章

jquery jtemplates.js模板渲染引擎的详细用法第三篇

jquery-jtemplates.js模板应用

百度JS模板引擎

简易前端模板引擎

JTemplates 的使用

JTemplate学习