JSFiddle - React, Tailwind, and code Playground

by Hideyuki Shimooka

HTML

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

<a href="#" id="add">add</a>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <p>{^{>#index}}:{{:name}}が{{:num}}個あります <a href="#" class="remove">×</a></p>
</script>
<script id="template_for" type="text/x-jsrender">
{^{for fruits}}
    <p>{^{>#index}}:{{:name}}が{{:num}}個あります <a href="#" class="remove">×</a></p>
{{/for}}
</script>

JavaScript

// 配列の操作
$(function() {
    // データの配列(もしくはオブジェクト)
    var fruits = [
        { name: "りんご", num: 3 },
        { name: "いちご", num: 5 },
        { name: "バナナ", num: 2 },
    ];

    // テンプレートに名前をつけて登録する
    // linkForTemplateはデータリンクしたforタグを使ったテンプレート
    $.templates({
        linkTemplate: "#template",
        linkForTemplate: "#template_for"
    });

    // テンプレート"linkTemplate"と変数fruitsをリンク
    $.link.linkTemplate('#result_link', fruits);
    $.link.linkForTemplate('#result_link_for', {fruits: fruits});

    $(document)
        /**
         * "add"をクリックすると、配列データに新しいデータを
         * 追加して再レンダリング
         */
        .on('click', '#add', function(ev) {
            // リンクされた配列データへの追加は$.observable().insert()
            $.observable(fruits).insert(
                { name: "ドリアン", num: fruits.length }
            );
            ev.preventDefault();
        })
        /**
         * "add"をクリックすると、配列データから当該データを
         * 削除して再レンダリング
         */
        .on('click', '.remove', function(ev) {
            // リンクされた配列データから削除は$.observable().remove()
            $.observable(fruits).remove(
                // clickイベントが発生したViewオブジェクトを取得し、
                // そのindexを取得する
                $.view(this).index
            );
            ev.preventDefault();
        });
});