JSFiddle - React, Tailwind, and code Playground

by Hideyuki Shimooka

HTML

<script src="http://www.jsviews.com/download/jsviews.min.js"></script>
<!-- レンダリング結果を表示するスペース -->
<p>テキストボックスに入力すると表示されたデータが更新される</p>
<div id="result"></div>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <div>
        <p>タグにキャレットなし</p>
        <p>{{if greet != 'Hello'}}{^{>greet}}{{/if}}</p>
    </div>
    <div>
        <p>タグにキャレットあり</p>
        {{!-- タグに"^"(キャレット/サーカムフレックス)が付いていることに注意 --}}
        <p>{^{if greet != 'Hello'}}{^{>greet}}{{/if}}</p>
        <div><input type="text" data-link="greet trigger=true"/></div>
    </div>
</script>

JavaScript

// タグのリンク
$(function() {
    // 表示するデータ
    var message = {
        greet: 'Hello !'
    };

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

    // テンプレート"linkTemplate"と変数greetをリンク
//    $.templates('#template').link('#result', message);
    $.link.linkTemplate('#result', message);
});