web-dev-qa-db-ja.com

ツリービューウィジェットを備えたバックボーン

ツリービューウィジェットに階層モデルを表示するプロジェクトで使用するために Backbone javascriptフレームワーク を評価しています（Windowsファイルブラウザーを考えてください）。

私loveバックボーンが世界についてどう考えているか。ただし、Backboneが実際にサーバーから階層モデルを受け取り、ツリーウィジェットを更新するという概念実証に到達する前に、多くのコーディングが必要になります。 バックボーンで深いデータ構造を表す にはさまざまな解決策があるのを見てきましたが、疑問に思っています...誰かが実際にこれを行ったことがありますか？

それが可能であることを知っているだけでも助けになるでしょう。実際には、バックボーンでデータを階層化するためのツリービューUIコンポーネントとポインターに名前を付けるとさらに良いでしょう。少しのサンプルコードは驚くほど素晴らしいでしょう。

データサイズに関しては、ツリーは数百のノード（フォルダー）を実行し、数千のリーフアイテム（ドキュメント）が少なくなります。データを段階的にロードするとよいでしょう（たとえば、ユーザーがクリックすると一度に1つのフォルダー）。それはおそらくショートッパーではありませんが。

ありがとう！

hierarchical-databackbone.js
55
Dean Moses

階層的なデータセットパスを移動したくない場合の1つのオプションは、ネストされたセットを使用することです（ http://en.wikipedia.org/wiki/Nested_set_model ）。これにより、コレクション全体を単一の配列（またはリストまたはそれを呼び出したいもの）に格納し、「左」と「右」の値を使用してリストの構造と階層を決定できます。

私の記憶が正しければ、この手法は元々、リレーショナルデータベースのデータストレージとクエリを最適化するために構築されました。ただし、データの再帰的な階層を回避するために、C＃/ Winformsアプリケーションで何度も使用しており、うまく機能しました。

javascriptでのこれの実装はかなり簡単なはずですが、大きなリストでどれだけうまく機能するかわかりません。

5
Derick Bailey

良い質問です、はい、私は以前にこれを行いました

2013年からバックボーンリレーショナルを使用しています（ http://backbonerelational.org/ ）、それは私にとっては問題なく動作します。

私のシナリオはあなたのシナリオと似ています。多くのコレクションとコレクション内のコレクションを含む複雑なJSONファイルがあります。

このプラグインを使用すると、次のようなことができます。

  • 関係定義の配列があります。これは、コレクション/モデルのツリーを定義できることを意味します。詳細はこちら（ http://backbonerelational.org/#RelationalModel-relations ）

  • リレーションのタイプを指定します。例：一部のコレクションには、リレーションタイプへの1つ以上の参照が含まれる場合があります。

クラスproductはBackbone.RelationalModelを拡張します//単なる例です。

relations: [
    {
        type : Backbone.Many
        key : 'the name of model or collection'
    }

ドキュメントを読んでください。それはうまくいきます。

私の実装に役立つもう1つの優れたプラグインは、Model Binder（ https://github.com/theironcook/Backbone.ModelBinder ）ビューをモデルにバインドするのに役立ちます。

私はこれらのプラグインで大丈夫です、すべてが機能しています。

それが役に立てば幸い。

1
rcarvalho

多分あなたはこのページで答えを見つけるでしょう。 Backbone.jsとEpoxy.jsに階層ツリーを書き込もうとしました https://stackoverflow.com/questions/20639550/backbone-epoxy-js-and-hierarchies-trees

次のようになります：

  • トップレベル1
    • 第2レベル、アイテム1
      • 第3レベル、アイテム1
      • 第3レベル、アイテム2
      • 第3レベル、アイテム3
    • 第2レベル、アイテム2
      • 第3レベル、アイテム4
      • 第3レベル、アイテム5
        • 第4レベル、アイテム1
        • 第4レベル、アイテム2
        • 第4レベル、アイテム3
      • 第3レベル、アイテム6
  • トップレベル2
    • 第2レベル、アイテム3
      • 第3レベル、アイテム7
      • 第3レベル、アイテム8
      • 第3レベル、アイテム9
    • 第2レベル、アイテム4
      • 第3レベル、アイテム10
      • 第3レベル、アイテム11
      • 第3レベル、アイテム12
0
Alexey