Do You PHP はてブロ

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

JsViewsチュートリアル - データリンクされたオブジェクトを操作する

jsviews

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

今回やること

JsViewsでデータリンクされたオブジェクトに対して更新・削除などの操作をする

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<div id="result"></div>

<a href="#" id="add">add</a>
<a href="#" id="modify">modify</a>
<a href="#" id="reset">reset</a>

<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 = { name: "りんご", num: 3 };

    // テンプレートに名前をつけて登録する
    // linkPropsTemplateはデータリンクしたpropsタグを使ったテンプレート
    $.templates({
        linkTemplate: "#template"
    });

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

    $(document)
        /**
         * "add"をクリックすると、オブジェクトに新しいプロパティを
         * 追加して再レンダリング
         */
        .on('click', '#add', function(ev) {
            $.observable(fruits).setProperty('color', 'green');
            ev.preventDefault();
        })
        /**
         * "modify"をクリックすると、既存のプロパティを更新して
         * 再レンダリング
         */
        .on('click', '#modify', function(ev) {
            if (fruits.name) {
                $.observable(fruits).setProperty('name', 'ドリアン');
            }
            ev.preventDefault();
        })
        /**
         * "remove"をクリックすると、プロパティを削除して
         * 再レンダリング
         */
        .on('click', '.remove', function(ev) {
            // removePropertyはドキュメント化されていないメソッド
            $.observable(fruits).removeProperty(
                // clickイベントが発生したViewオブジェクトを取得し、
                // そのデータのキーを取得する
                $.view(this).data.key
            );
            ev.preventDefault();
        })
        /**
         * "reset"をクリックすると、既存のプロパティを更新して
         * 再レンダリング
         */
        .on('click', '#reset', function(ev) {
            if (fruits.color) {
                $.observable(fruits).removeProperty('color');
            }
            $.observable(fruits).setProperty({
                name: "りんご",
                num: 3
            });
            ev.preventDefault();
        });
});
</script>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
{^{props #data}}
    <p>{^{>key}}の値は{^{:prop}}です <a href="#" class="remove">×</a></p>
{{/props}}
</script>
</body>
</html>

説明

前回は配列の操作でしたので、今回はリンクされたオブジェクトの操作の説明です。
JsViews(実際にはJsObservableという別ライブラリ)では、リンクされたオブジェクトについては、更新と削除の2つのメソッドが用意されています。

更新

オブジェクトのプロパティを1つまたは複数同時に更新します。複数更新する場合は、オブジェクトとして渡します。

$.observable([データリンクしたオブジェクト]).setProperty([プロパティ名], [プロパティの値])
$.observable([データリンクしたオブジェクト]).setProperty({
    [プロパティ名1]: [プロパティの値1],
    [プロパティ名2]: [プロパティの値2],
          ：
})

コード例では、"add"というリンクをクリックした時に、変数fruitsに"color"というプロパティを追加しています。

$.observable(fruits).setProperty('color', 'green');

また、"modify"というリンクをクリックした時には、nameプロパティの値を"ドリアン"に変更しています。

$.observable(fruits).setProperty('name', 'ドリアン');

もう一つ。"reset"というリンクをクリックした時には、name, numの各プロパティの値を同時に変更しています。

$.observable(fruits).setProperty({
    name: "りんご",
    num: 3
});
削除

公式サイトにドキュメント化されていませんが、プロパティを削除するメソッドも用意されています。

$.observable([データリンクしたオブジェクト]).removeProperty([プロパティ名])

コード例では、"×"というリンクをクリックした際に、当該プロパティを変数fruitsから削除しています。

$.observable(fruits).removeProperty(
    $.view(this).data.key
);

なお、該当するプロパティ名は、クリックされた要素を含むViewオブジェクトを取得し、そのデータから取得しています。

JSFiddleで動作を見る

参照