2022/07/04

JsRender Sample

現在前端 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
&lt;a href&#61;&#34;http://www.google.com&#34;&gt;google&lt;/a&gt;

{{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/

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)