拿一段 實例 演示 語法
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>
