拿一段 实例 演示 语法
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>