現在前端 framework 百家爭鳴，不過和後端 framework
遇到一樣的問題，版本更動超快寫法不相容，今日的當紅炸子機相隔一年後消失的無影無蹤時有所聞，後端比較沒有迅速隕落的問題，畢竟他的開發門檻還是稍高一些，也因此除了有玩一下 vuejs 以外對
front-end framework 真的沒有太高的興趣，即便我超愛寫 JavaScript，不過專案裡面還滿常用到 js render template 這件事情，所以我還是有使用一些 plugin
來實現這件事情，今天就來介紹 JsRender 這個 plugin
基礎功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JsRender</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.88/jsrender.min.js"></script>
<script>
$(function() {
var data = {name: 'chan'};
var html = $.templates('<strong>{{:name}}</strong>').render(data);
$('#app').append(html);
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
JsRender 傳進去的資料為 JSON，上面的內容會得到：
<div id="app"><strong>chan</strong></div>
如果是複數的內容，JsRender 會自動幫你做 repeat。
script
$(function() {
let data = [
{name: 'chan'},
{name: 'phoebe'}
];
let html = $.templates('<strong>{{:name}}</strong>').render(data);
$('#app').append(html);
});
output
<div id="app"><strong>chan</strong><strong>phoebe</strong></div>
樣板
如果將樣板寫在 script 裡面，往往會變得很難維護，字串也超長，所以 JsRender 有一個把樣板隔離出來的套用方式。
script
$(function() {
let data = [
{name: 'chan'},
{name: 'phoebe'}
];
let html = $.templates('#info').render(data);
$('#app').append(html);
});
html
<script id="info" type="text/html">
<strong>{{:name}}</strong>
</script>
output
<div id="app">
<strong>chan</strong>
<strong>phoebe</strong>
</div>
內建函式
{{> …}} (HTML-encode)
將輸出的部份加上 > 的話會將程式碼 encode。
script
$(function() {
let data = {link: '<a href="http://www.google.com">google</a>'};
let html = $.templates('#info').render(data);
$('#app').append(html);
});
html
<script id="info" type="text/html">
{{>link}}
</script>
output
<a href="http://www.google.com">google</a>
{{if …}}
判斷式。
script
$(function() {
let data = [
{name: 'chan', age: 37},
{name: 'phoebe', age: 38},
{name: 'lucas', age: 2}
];
let html = $.templates('#info').render(data);
$('#app').append(html);
});
html
<script id="info" type="text/html">
{{:name}} is {{if age > 10}}adult{{else}}children{{/if}}<br>
</script>
output
<div id="app">
chan is adult<br>
phoebe is adult<br>
lucas is children<br>
</div>
{{for …}}
迴圈。
script
$(function() {
let data = [{
name: 'chan',
likes: [{
name: 'music'
}, {
name: 'movie'
}]
}, {
name: 'phoebe'
}, {
name: 'lucas',
likes: [{
name: 'cartoon'
}]
}];
let html = $.templates('#info').render(data);
$('#app').append(html);
});
html
<script id="info" type="text/html">
<div>
{{:#index}}: {{:name}}
{{if likes}}
<ul>
{{for likes}}
<li>{{:#index + 1}}: {{:name}}</li>
{{/for}}
</ul>
{{else}}
<div>no likes</div>
{{/if}}
</div>
</script>
output
<div id="app">
<div>
0: chan
<ul>
<li>1: music</li>
<li>2: movie</li>
</ul>
</div>
<div>
1: phoebe
<div>no likes</div>
</div>
<div>
2: lucas
<ul>
<li>1: cartoon</li>
</ul>
</div>
</div>
{{include …}}
引入其他的樣板。
script
$(function() {
let data = {
name: 'test',
data: [
{
name: 'chan',
age: 42
},
{
name: 'phoebe',
age: 42
}
]
};
console.log($('#main').render(data));
});
html
<script id="main" type="text/html">
<h3>{{:name}}</h3>
{{include tmpl="#sub"/}}
</script>
<script id="sub" type="text/html">
<ol>
{{for data}}
<li>{{:name}}: {{:age}}</li>
{{/for}}
</ol>
</script>
output
<h3>test</h3>
<ol>
<li>chan: 42</li>
<li>phoebe: 42</li>
</ol>
{{props …}}
key value 式的迴圈。
script
$(function() {
var data = [
{
name: 'Chan',
likes: {
name: 'a1',
age: 33
}
},
{
name: 'Phoebe',
likes: {
food: 'steak',
drink: 'juice'
}
}
]
var html = $.templates('#info').render(data);
$('#app').html(html);
});
html
<script id="info" type="text/html">
<div>
{{:name}}
<ul>
{{props likes}}
<li>{{:key}}: {{:prop}}</li>
{{/props}}
</ul>
</div>
</script>
output
<div id="app">
<div>
Chan
<ul>
<li>name: a1</li>
<li>age: 33</li>
</ul>
</div>
<div>
Phoebe
<ul>
<li>food: steak</li>
<li>drink: juice</li>
</ul>
</div>
</div>
helper
helper 也是一種 JSON 格式，可以是文字或者是 function。
script
$(function() {
var helpers = {
prefix: function(val) {
return val + ' is cool';
},
version: '1.1'
};
var data = {
name: 'chan'
};
var html = $.templates('#info').render(data, helpers);
$('#app').append(html);
});
html
<script id="info" type="text/html">
version: {{:~version}} name: {{:~prefix(name)}}
</script>
output
<div id="app">
version: 1.1 name: chan is cool
</div>
helper 還有另一種 global 的傳入方式。
script
$(function() {
let helpers = {
prefix: function(val) {
return val + ' is cool';
},
version: '1.1'
};
$.views.helpers(helpers);
let data = {
name: 'chan'
};
let html = $.templates('#info').render(data);
$('#app').append(html);
});
以上是最基本的範例，不過應該可以應付大部分的情況了，若要使用其他更詳盡的功能可以前往他的官網 https://www.jsviews.com/
