Do You PHP はてブロ

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

JsViewsチュートリアル - テンプレートのリンクを解除する

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="unlink">unlink</button>
<button id="empty">empty</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 = {};

    $.templates('#template').link("#list_simple", fruits);

    $(document)
        .on('click', '#add', function(ev) {
            $.observable(fruits).setProperty({
                code: "99",
                name: "ドリアン"
            });
        })
        .on('click', '#unlink', function(ev) {
            $.observable(fruits).setProperty({
                code: "01",
                name: "バナナ"
            });

            // リンクを解除する。コンテンツはそのまま
            $.unlink('#list_simple');
        })
        .on('click', '#empty', function(ev) {
            // 空にすることで、リンクも自動的に解除される
            $('#list_simple').empty();
        });
});
</script>

<script id="template" type="text/x-jsrender">
{^{if #data}}
    <div id="inner">
        {^{>code}}/{^{>name}}
    </div>
{{/if}}
</script>
</body>
</html>

説明

テンプレートへのリンクを解除する場合、jsViewsのunlinkメソッドを使用します。ただし、unlinkメソッドはテンプレート内のscriptタグを削除するだけ、つまり、リンクが解除されるだけで描画済みのコンテンツはそのままになりますので、必要に応じてコンテンツのクリアなどを行う必要があります。また、リンクされたノードが削除された場合、自動的にリンクも削除されます。

JSFiddleで動作を見る

参照