作者:zccst
模板已是第二次接觸,第一次使用模板記得是在十分系統里渲染頁面時使用,當時已做到熟練使用,但實際上仍不知道原因。
再次學習模板已不是從0開始,所以還算順手,但畢竟還只限於使用,今天繼續學習,希望這次能夠更深入一些。
這次學習的是mustache.js,他的理念是讓模板盡量保持簡單,甚至連基本的邏輯判斷都不需要用。
本文基本要點:
1,基本用法
2,使用模板(寫在頁面或異步獲取)
3,集中變量定義
官方地址:https://github.com/janl/mustache.js
以下是公共文件
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
$(function(){
...
});
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
1,最基礎的用法
var template = '{{title}} spends {{calc}}';
var obj = {
title: "Joe",
calc: function () {
return 2 + 4;
}
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);
2,還可以使用模板
總結:兩個基本素材:template, obj。前者和后者都可以簡單,也可以復雜
Mustache替換:var result = Mustache.render(template, obj);
渲染到頁面:$("xxID").html(result);
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {name: "Luke"});
$('#target').html(rendered);
3,template除了直接賦值和來自頁面外,還可以異步獲取。
var obj = {};
$.get('template.mst', function(template){
var result = Mustache.render(template, obj);
$("xxID").html(result);
});
總結:template有三種來源:
(1)直接字符串
(2)本頁面中帶ID的script
(3)異步獲取
4,幾種變量
最基本變量 :{{ company }}
原樣輸出變量:{{{ company }}}或{{ &company }}
嵌套用點變量:{{name.first}} {{name.last}}