JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jsviews.com/download/jsviews.min.js"></script>
<div id="list_simple"></div>
<hr/>
<button id="add">add</button>
<button id="switch">switch</button>

<script id="template1" type="text/x-jsrender">
{^{if #data}}
    <div id="inner">
        {^{>code}}/{^{>name}}
    </div>
{{/if}}
</script>
<script id="template2" type="text/x-jsrender">
    <h1 id="inner">
        {^{>foo}}:{^{>bar}}
    </h1>
</script>

JavaScript

$(function() {
    var fruits = {
        foo: 'foo',
        bar: 'bar'
    };
    $.templates({
        template1: "#template1",
        template2: "#template2"
    });

    var current_template = $.templates.template1;
    $.link.template1("#list_simple", fruits);

    $(document)
        .on('click', '#add', function(ev) {
            $.observable(fruits).setProperty({
                code: "99",
                name: "ドリアン"
            });
        })
        .on('click', '#switch', function(ev) {
            /**
             * テンプレートを差し替えるviewオブジェクトを取得する
             */
            var $view = $.view('#inner');   // $.view($('#inner'))でもOK
            if (current_template == $.templates.template1) {
                current_template = $.templates.template2;
            } else {
                current_template = $.templates.template1;
            }

            /**
             * テンプレートを差し替える
             *
             * コンパイル済みテンプレートでない場合、$.templates('#template1')の
             * ような書式でもOK
             */
            $view.tmpl = current_template

            /**
             * 新しいテンプレートで再描画
             */
            $view.refresh();
        });
});