1

多かれ少なかれいくつかのネストされたリストである小さなアプリの構築を検討しており、各リストでさまざまなアイテムを選択すると、他のネストされたリストのコンテンツがフィルター処理されます。

リスト 1

  • アップル
    • 電話
      • iPhone
    • コンピューター
      • マックブックエア
      • サムスン
    • 電話
      • ギャラクシー S

リスト 2

  • ベストバイ
    • ミシガン州アナーバー
    • イリノイ州シカゴ
  • ウォルマート
    • ミシガン州ランシング

ユーザーが「Apple > Phone」をクリックすると、サーバーは関連するエントリをリスト 2 で検索し、リスト 2 を更新して「Best Buy」のみを表示します (Best Buy が Apple 製の電話を販売する唯一の店舗であると仮定します)。

私の質問は、これを構築するためにどのフロントエンド JS ライブラリを使用する必要があるかについて、誰かが推奨するものはありますか? これは、サーバーからの AJAX JSON 応答に基づいて DOM (リスト) を大量に更新することになります。

KnockoutJS を調べてみましたが、リストごとに viewModel を作成し、KnockoutJS マッピング ライブラリを介して更新しようとすると、面倒なことがわかりました。

私は単純に jQuery を使用することを考えていましたが、それを使用して DOM の大きなセクションを構築することはあまり好きではありません (すぐに醜くなるようです)。

私が避けたいことの 1 つ (そしてなぜ KnockoutJS を調べたのか) は、コードでマークアップを書くのが好きではないということです。マークアップを「HTML」で維持し、フレームワークを介して JS データをこれらの要素に「バインド」するというアイデアが気に入っています。

また、すべての視覚的な「綿毛」、イベント バインディングなどに jQuery を使用したいと考えています。

ありがとう

4

3 に答える 3

1

最終的に Backbone.js に落ち着きました [1]

バインディングに関しては、Knockout.js よりも少し柔軟に見えます。各リスト レベルを作成するために、Backbone でサポートされている JS テンプレートを使用しています。これには少しコードが必要ですが、Backbone は非常に柔軟です (したがって、少しのコード)。これは他の多くの JS フレームワークで可能であると確信していますが、バックボーンはそれを機能させるためにフレームワーク/API/複雑さを深く理解する必要はありません - (私の) コードはより冗長になりますが、これにより、すべてがどのように機能するかを簡単にまとめることができます。

[1] http://backbonejs.org/

于 2012-07-08T05:02:23.887 に答える
0

これは、「「HTML」でマークアップを維持する」という概念に取り組むことを目的とした、より部分的な答えです。次のように、各メニュー項目のテンプレートとなる汎用メニュー項目をHTMLで作成します。

<li id="menuItemTemplate" class="menuItem">
  <span class="menuItemText"></span>
  <ul class="submenu"></ul>
</li>

これは、ページの目に見える場所にはありません。メニュー項目ごとに挿入されるのは単純なHTMLです。次に、メニュー項目を追加するときに、JavaScriptがmenuItemリストに必要な数の要素を追加します。HTMLの操作に関しては、JavaScriptは、データを整理またはスタイル設定するための追加idや属性、および各アイテムのテキストコンテンツの追加などを行うだけで済みます。classサンプル実装は次のようになります（私はjQueryが大好きです）：

function loadMenuItem(text, parentId) {
  // Grab the template
  var newItemHtml = $("#menuItemTemplate")[0];
  // Set its id to something unique
  $(newItemHtml).attr("id", getNextId());
  // Set the text
  $(newItemHtml).find("span.menuItemText").html(text);
  // Put it in the clicked menu
  $(parentId + "ul.submenu").append( newItemHtml );
}

結局、私はあなたのプロジェクトをプログラミングしません。私はあなたに私の好みを与えることしかできません。これにかなりの時間がかかる場合は、面白そうなフレームワークをすべて（小規模ではあるが）試してみて、全体的な感覚をつかむのが最善の方法だと思います。それぞれでDOM変換アプリを開発するのが好きです。それはあなたにあなたがもっと好きになるであろうより良い考えをあなたに与えるだけでなく、あなたに異なるフレームワークを紹介するでしょう。

于 2012-06-01T22:48:57.010 に答える