JavaScriptおれおれAdvent Calendar 2014 – 23日目

Model-Viewなライブラリーとか一切なし、サーバー側出力HTMLにjQueryから操作してあれこれする話です。だいたい同じものが繰り返し出力されてる想定。

モジュールという呼び方で良いんだろうか。

モジュールの構成

例えばこんな感じ。商品一覧みたいな。

  • div.js-list
    • article.js-item[data-id=”1″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • article.js-item[data-id=”2″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • article.js-item[data-id=”3″]
      • span.js-toggle
      • h1.title
      • div.js-detail.is-hidden
        • div.description
        • form.js-form
    • （以下繰り返し）

機能

  • 各モジュールの.js-toggleクリックで、その領域を開閉する
  • 各モジュールの.js-form送信で、その購入画面へ遷移する

モジュールとして実装

.js-toggleクリックなんで、まずはこう。

$('.js-toggle').on('click', function(event) {
    // …
});

で、ここから「モジュール」を認識する。

$('.js-toggle').on('click', function(event) {
    // モジュール取得
    var $button = $(event.currentTarget);
    var $item = $button.closest('.js-item');

    // …
});

あとはモジュール単位に処理。

$('.js-toggle').on('click', function(event) {
    // モジュール取得
    var $button = $(event.currentTarget);
    var $item = $button.closest('.js-item');

    // 開閉
    // （このモジュール内の詳細要素を対象にする。）
    var $detail = $item.find('.js-detail');
    $detail.toggleClass('is-hidden');
});

フォームの方はvar id = $item.attr('data-id');でID取得して、次の遷移先URLを構築する。（今回の例だと普通にフォームで移動したら終わりっぽいけど。）

とまあそんな場面もあります

サーバー側からクライアント側への過渡期っぽい実装。

jQueryの要素移動（Traversing）関係の機能はあんまり使わないんだけど、こういう実装するときはclosest()とfind()だけ使ってます。