Do You PHP はてブロ

Do You PHPはてなからはてブロに移動しました

JsViewsチュートリアル - リンクしたテンプレートをまるごと差し替える

JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。

今回やること

JsViewsでリンクしたテンプレートを別のテンプレートに差し替える

コード

<html>
<body>
<div id="list_simple"></div>
<hr/>
<button id="add">add</button>
<button id="switch">switch</button>

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script>
<script type="text/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();
        });
});
</script>

<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>
</body>
</html>

説明

リンクしたテンプレートを何らかのイベントが発生したタイミングで、別のテンプレートに差し替える事もできます。この場合、viewオブジェクトのtmplプロパティに別のテンプレートオブジェクトを代入し、viewオブジェクトのrefreshメソッドを呼び出すことで新しいテンプレートを使って再描画させます。

JSFiddleで動作を見る