JSFiddle - React, Tailwind, and code Playground

by Hideyuki Shimooka

HTML

<script src="http://www.jsviews.com/download/jsviews.min.js"></script>
<!-- レンダリング結果を表示するスペース -->
<div id="result"></div>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    {{for items tmpl="#template_for"/}}
    {{props options tmpl="#template_props"/}}
</script>
<script id="template_for" type="text/x-jsrender">
    <p>{{:name}}が{{:num}}個あります</p>
    {{if num < 3 tmpl="#template_if"}}
    {{else tmpl="#template_else"}}
    {{/if}}
</script>
<script id="template_if" type="text/x-jsrender">
    <p>{{:name}}の個数はそろそろ少なくなってきました</p>
</script>
<script id="template_else" type="text/x-jsrender">
    <p>{{:name}}の個数はまだ大丈夫です</p>
</script>
<script id="template_props" type="text/x-jsrender">
    <p>{{>key}}の値は{{>prop}}です</p>
</script>

JavaScript

// if、for、propsタグで子テンプレートを読み込む
$(function() {
    // 表示するデータ
    var data = {
        items: [
            { name: "りんご", num: 3 },
            { name: "いちご", num: 5 },
            { name: "バナナ", num: 2 }
        ],
        options: {
            library: "JsRender",
            language: "JavaScript"
        }
    };

    // テンプレートに名前(ここでは"linkTemplate")をつけて登録する
    $.templates({
        linkTemplate: "#template"
    });

    // テンプレート"linkTemplate"に変数dataを渡し、
    // レンダリング結果を表示
    $('#result').html($.render.linkTemplate(data));
});