2017/08/27

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() {
        var data = [
            {name: 'chan'},
            {name: 'phoebe'}
        ];
        var html = $.templates('<strong>{{:name}}</strong>').render(data);
        $('#app').append(html);
    });

結果:

<div id="app"><strong>chan</strong><strong>phoebe</strong></div>

樣板

如果將樣板寫在 script 裡面,往往會變得很難維護,字串也超長,所以 JsRender 有一個把樣板隔離出來的套用方式

script
$(function() {
    var data = [
        {name: 'chan'},
        {name: 'phoebe'}
    ];
    var html = $.templates('#info').render(data);

    $('#app').append(html);
});
html
<script id="info" type="text/x-jsrender">
<strong>{{:name}}</strong>
</script>

結果:

<div id="app">
        <strong>chan</strong>
        <strong>phoebe</strong>
</div>

內建函式

{{> …}} (HTML-encode)

將輸出的部份加上 > 的話會將程式碼 encode

script
$(function() {
    var data = { link: '<a href="http://www.google.com">google</a>' };
    var html = $.templates('#info').render(data);

    $('#app').append(html);
});
html
<script id="info" type="text/x-jsrender">
    {{>link}}
</script>

結果:

<a href="http://www.google.com">google</a>

{{if …}}

判斷式

script
$(function() {
    var data = [
        {name: 'chan', age: 37},
        {name: 'phoebe', age: 38},
        {name: 'lucas', age: 2}
    ];
    var html = $.templates('#info').render(data);

    $('#app').append(html);
});
html
<script id="info" type="text/x-jsrender">
    {{:name}} is {{if age > 10}}adult{{else}}children{{/if}}<br>
</script>

結果:

<div id="app">
    chan is adult<br>

    phoebe is adult<br>

    lucas is children<br>
</div>

{{for …}}

迴圈

script
$(function() {
    var data = [{
        name: 'chan',
        likes: [{
            name: 'music'
        }, {
            name: 'movie'
        }]
    }, {
        name: 'phoebe'
    }, {
        name: 'lucas',
        likes: [{
            name: 'cartoon'
        }]
    }];
    var html = $.templates('#info').render(data);

    $('#app').append(html);
});
html
<script id="info" type="text/x-jsrender">
    <div>
    {{:#index}}: {{:name}}
    {{if likes}}
        <ul>
        {{for likes}}
        <li>{{:#index + 1}}: {{:name}}</li>
        {{/for}}
        </ul>
    {{else}}
    <div>no likes</div>
    {{/if}}
    </div>
</script>

結果:

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

{{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/x-jsrender">
    <div>
    {{:name}}
    <ul>
    {{props likes}}
        <li>{{:key}}: {{:prop}}</li>
    {{/props}}
    </ul>
    </div>
</script>

結果:

<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/x-jsrender">
    version: {{:~version}} name: {{:~prefix(name)}}
</script>

結果:

<div id="app">
    version: 1.1 name: chan is cool
</div>

helper 還有另一種 global 的傳入方式

script
$(function() {
    var helpers = {
        prefix: function(val) {
            return val + ' is cool';
        },
        version: '1.1'
    };
    $.views.helpers(helpers);
    var data = {
        name: 'chan'
    };
    var html = $.templates('#info').render(data);

    $('#app').append(html);
});

以上是最基本的範例,不過應該可以應付大部分的情況了,若要使用其他更詳盡的功能可以前往他的官網 https://www.jsviews.com/

沒有留言: