拿一段 实例 演示 语法

X-template 语法

// 只用在意 模板语法，其他自行忽略
<script type="text/x-template" id="user_resume_list_tpl">
        {{#each experiences as record index}}
            <li class="multi-line">
                <div class="text">
                    <p data-content="{{record.content}}" data-cut="{{record.content.cutStr(120)}}">{{record.content.cutStr(120)}}</p>
                </div>
                <div class="bottom-info clearfix">
                    {{#if record.content.length > 80}}
                        <span class="j-get-more">展开</span>
                        <i class="date">{{new Date(record.time).format('yyyy-MM-dd')}}</i>
                    {{#else}}
                        <i class="date">{{new Date(record.time).format('yyyy-MM-dd')}}</i>
                    {{/if}}
                </div>
            </li>
        {{/each}}
    </script>

arttemplate 3.0 语法

// 只用在意 模板语法，其他自行忽略
<script type="text/x-template" id="user_resume_list_tpl">
        {{each experiences as record index}}
            <li class="multi-line">
                <div class="text">
                    <p data-content="{{record.content}}" data-cut="{{record.content.cutStr(120)}}">{{record.content.cutStr(120)}}</p>
                </div>
                <div class="bottom-info clearfix">
                  // 引入子模板
                    {{include 'list_tpl'}}
                </div>
            </li>
        {{/each}}
    </script>
//1. 无论数组或者对象都可以用 each 进行遍历。
// 2. if 判断可以直接使用，数组方法，字符串方法 也可以在模板中使用
// 3. 这个 include 比较好用，{{include 'list_tpl'}} list_tpl是子模板的ID，
//    默认是共享 experiences 数据的 也可以在后面指定 新数据 {{include 'list_tpl' new_data}}

// 子模板
<script type="text/x-template" id="list_tpl">
    {{each experiences as record index}}
      {{if record.content.length > 80}}
        <span class="j-get-more">展开</span>
            <i class="date">{{new Date(record.time).format('yyyy-MM-dd')}}</i>
    {{else}}
        <i class="date">{{new Date(record.time).format('yyyy-MM-dd')}}</i>
    {{/if}}
    {{/each}}
</script>

<script>
// 后台 数据
var data = data;
// 渲染模板
var html = template('test', data);
// 回填数据
document.getElementById('user_resume_list_tpl').innerHTML = html;
// 用jquery 、zepto是一样的 
$("#user_resume_list_tpl").html();
</script>

另外 Handlebars 也很nice，文档很齐全，比 X-template 好用多了，艹无力吐槽