2-3. ElementSetup

data-setup属性は要素の初期化時に実行されるメソッドを指定する属性です、data-setup属性は最も重要な属性です。

• HTMLに元々あるDOMに対しては$(document).readyのタイミングで初期化処理を実行
  • app.dom.setup(document.body)
• 生成したDOMに対しては手動で実行
  • app.dom.setup(element)

実装例

app.dom.setup = function(){
    var args = $.makeArray(arguments);
    var context = args.shift();
    $('[data-setup]', context).each(function(){
        var ele = $(this);
        var methods = ele.data('setup').split(',');
        for (var i = 0, max_i = methods.length; i < max_i; i++) {
            app.obj.get(app.setup, methods[i])
                .apply(app, [$(this)].concat(args));
        }
    });
}

比較

too old

• コードサーチ: grep '^function show'

  <a href="#" onclick="return show('some-window');">show some window</a>
  
  
  function show(id) {
      var element = document.getElementById(id);
      if (element) {
          element.style.display = 'block';
      }
      return false;
  }
  

old

• コードサーチ: grep '#button1'

  <a id="button1" href="#">show some window</a>
  
  
  $(document).ready(function(){
      $('#button1').click(function(e){
          e.preventDefault();
          $('#some-window').show();
      });
  });
  

new (Web Page)

• コードサーチ: grep '.show-button'

<a
    class="show-button"
    href="#"
    data-show-id="some-window">show some window</a>

$(document).ready(function(){
    $('.show-button').click(function(e){
        e.preventDefault();
        $('#' + $(this).data('show-id')).show();
    });
});

new (One Page Application)

かなりdata属性が増えています、HTMLのソースという設定ファイルの様ですね。

DOM自身にUIパーツとしての設定を記述するのは合理的です、例えば表示時のエフェクトや5秒後に自動的に閉じるといった内容がこれにあたります。

今まで大きく異なるのは Js側でセレクターで要素を指定し処理を書いていた のが HTML側に処理を指定し、Js側では処理のみを書く という所です。

大昔はonlick等に関数名を書いていましたが、またHTMLに関数名が帰って来たのです。

data-setup="show" で app.setup.show(a) が実行されますが、細かいルールは次節で説明します。

• コードサーチ: grep '^app.setup.show'

サンプル1

<a
    data-setup="show"
    data-show='{"id":"some-window"}'
>show some window</a>
<a
    data-setup="hide"
    data-hide='{"id":"some-window"}'
>close</a>
<div
    data-setup="showable"
    data-showable='{
        id:"some-window"
        default:"hide",
        show:{effect:{"direction":"down"},timeout:5000},
        hide:{effect:{"direction":"down"}}
    }'
>some-window</div>

サンプル2

<a
    data-setup="tab.menu"
    data-tab='{"id":"main","group":"help"}'
>main</a>
<a
    data-setup="tab.menu"
    data-tab='{"id":"sub","group":"help"}'
>sub</a>

<div
    data-setup="tab.content"
    data-tab='{"id":"main","group":"help"}'
>main</div>
<div
    data-setup="tab.content"
    data-tab='{"id":"sub","group":"help"}'
>sub</div>

data-setupを使うと国際化もこんなに簡単

<!-- 日本語環境でアクセスすると a要素のtextが置き換わる -->
<a
    data-setup="localize"
    data-text-ja="新しいリスト"
>New List</a>

app.setup.localize = function(ele){
    ele.text(ele.data('text-' + app.env.lang));
}