arttemplate

一、先在html中,寫好要複用的模板:javascript

<li>
	<img src="{{favcoverUrl}}" />
	<div>
		<p>{{favtitle}}</p>
		<p>
			<span>{{favbestPrice}}</span>
			<a href="../../course/detail.html?productId={{productId}}">去報名</a>
		</p>
	</div>
</li>

!要賦值的地方,用 「 {{}} 」 包起來html

二、在js中添加引用:java

//AMD規範
require(['plugins/zepto', 'common/template',], function ($,tpl) {
    //在這裏假設data爲接口返回的數組數據,實際項目中,有調用接口,這裏省略
    var pos, oneData, html = '';
    for(pos in data){
        oneData = data[pos];
        html += tpl('模板html路徑', {
            //賦值
            favtitle: oneData.title,
			favcoverUrl: oneData.cover_url,
			favbestPrice: oneData.best_price,
			productId:oneData._id
        });
    }
    $('#id').append(html); //在頁面中插入這一個模板
});
相關文章
相關標籤/搜索