QA@IT

Backbone.js や Ember.js などのクライアントサイド JavaScript MVC FW を使った場合のリストアイテムのセットアップ

2760 PV

掲題の通りなのですが、

  • クライアントサイド:JavaScript MVC FW(Backbone.js, Ember.js etc ...)
  • サーバーサイド:JavaScript 以外(Java, Scala, Ruby etc ...)

のような環境で開発する際, (エンティティではない)リストアイテムのセットアップはどのように行うのが一般的でしょうか?

例えば, あるチェックボックスを選択すると動的にコンボボックスが増える画面があるとします。このとき, クライアントサイド JavaScript MVC FW を使っている場合、JS 側でコンボボックスを DOM ツリーに追加すると思います。ここでコンボボックスの選択候補のリストはどのようにセットアップするべきでしょうか?

コンボボックスには

  1. 動的にリストの内容が決定するもの
  2. 静的にリストの内容が決定するもの

の 2 種類がありますが、前者は Ajax 等でサーバに問い合わせるしかないと思うのですが、後者の場合は皆さんどうされていますか?なお、このリストはエンティティではなく, サーバー側では enum 等で定義された静的なリストだとします。

解決策 ① サーバー側とクライアント側でそれぞれリストを定義する

安直ですが保守性に問題があると思います。

解決策 ② 常に Ajax でサーバーにリストを問い合わせる

サーバー側でリストを定義出来るので ① に比べると保守性は向上しますが以下の懸念点があります。

  • 業務アプリケーションなど大量にコンボボックスがある場合, パフォーマンスが心配
  • REST 的にはサーバー側はどのような API にすべきなのかが分からない

……というわけで, 今までクライアントサイド JS FW を使ったことがないので何か勘違いしている点があるかもしれませんが, 皆さんはどうされているかご意見をお聞かせ下さい。

回答

2 つほど考えてみました。コンボボックスの選択肢は文字列の配列で設定できると仮定しています。

A. 1 つの JSON にすべての選択肢を格納して Ajax で取得

サーバ側で (enum などを元に) 次のような JSON を生成して、Ajax で取得する方法。
コンボボックスの数が多くても通信は 1 回で済みます。

{ "jobs": ["Programmer", "DBA"], // jobs コンボボックスの選択肢
  "langs": ["Ruby", "JavaScript"] // langs コンボボックスの選択肢
}

クライアント側では、コンボボックスの種類に応じて、このオブジェクトから選択肢を参照して描画します。

URL は /ui/choices あたりで。

B. 1 を script 要素に埋め込み

HTML を動的に生成しているなら、A のようなデータを script 要素に埋め込むこともできます。この場合 Ajax で通信する必要はありません。

<script>
// ERB での例
// choices は A のようなデータ
// to_json は JSON 文字列を返すメソッド
var CHOICES = <%= choices.to_json %>;
</script>
編集 履歴 (0)
  • ありがとうございます。いずれもなるほど、と思いました。

    A. はリストが多いと少し辛いかなぁと思いました。業務アプリの場合はものすごい数の入力フィールドやリストが存在するので……。/ui/choices は良いですね。
    -
  • B. の場合はメンテナンス性とのトレードオフでしょうか。
    http://stackoverflow.com/questions/9469235/is-it-possible-to-load-a-handlebars-template-via-ajax
    こんな感じで template を遅延フェッチしちゃえばそのときに埋め込むことは可能ですね。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。