The Diary of Aska

onclickぽい指定への回帰

onclick等の属性を使ったコーディングから、documentのreadyで要素を指定しイベントのバインドを行うコーディングに変えつつあったが、この処理自体かなり多いとどの要素が何されるのか把握するのが面倒になってくる。

試しにdata-属性を利用し、エレメントに初期化処理を書いて、これをreadyで各初期化処理にディスパッチしてセットアップする様にコードを書き直したら思いの外スッキリしたのでこれから主にOne Page Applicationでは使っていこうと思う。

  1. 初期化時にイベント割り当て、ローカライズ等行いたい初期化処理をdata-initにカンマ区切りで指定する

    <div class="comment"
        data-init="click,localize,guide"
        data-bind="openComment"
        data-id="comment-window"
        data-guide-en="Write a comment."
        data-guide-ja="コメントする"
        data-text-ja="コメント"
    >
    comment</div>
    
  2. ready時にdata-initを取得し、内容に応じて初期化メソッドを呼ぶ。例えばdata-init="click,localize,guide"を書いた場合、initElementClick、initElementLocalize、initElementGuideが呼び出される。

    function initElements(context) {
        $('*[data-init]', context).each(function(){
            var ele = $(this);
            var methods = ele.data('init').split(',');
            for (var i = 0, max_i = methods.length; i < max_i; i++) {
                app.exec(['initElement', methods[i]], [this]);
            }
        });
    }