JSFiddle - React, Tailwind, and code Playground

by Hideyuki Shimooka

HTML

<script src="http://www.jsviews.com/download/jsviews.min.js"></script>
<div id="list"></div>
<hr/>
<button id="code">update code</button>
<button id="name">update name</button>
<button id="color">update color</button>

<script id="template" type="text/x-jsrender">
    <div>
        <p><span data-link="fruits.code"></span>:<span data-link="fruits.name"></span>(<span data-link="fruits.color"></span>)</p>
    </div>
    <div>
        {^{for log tmpl="#template_log"/}}
    </div>
</script>
<script id="template_log" type="text/x-jsrender">
    <li><span data-link="#data"></span></li>
</script>

JavaScript

// リンクされたデータの更新を監視し、イベントハンドラを実行する
$(function() {
    // データのオブジェクト
    var application = {
            log: [],
            fruits: {
                code: "01",
                name: "りんご",
                color: '赤'
            }
        };

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

    // テンプレートlinkTemplate(#template)と変数applicationをリンクさせ、
    // レンダリング結果をid="list"に表示
    $.link.pathTemplate("#list", application);

    $(document)
        .on('click', '#code', function(ev) {
            $.observable(application.fruits).setProperty('code', application.fruits.code + '9');
        })
        .on('click', '#name', function(ev) {
            $.observable(application.fruits).setProperty('name', application.fruits.name + '！');
        })
        .on('click', '#color', function(ev) {
            $.observable(application.fruits).setProperty('color', application.fruits.color + '色');
        })

    // application.fruitsのnameプロパティもしくはcolorプロパティが
    // 更新された場合にハンドラが実行される
    $.observe(application, 'fruits.name', 'fruits.color', function(ev, args) {
        $.observable(application.log).insert([args.path + 'が' + args.value + 'に更新されました']);
    });
});