2011-10-07 24 views
12

私はユーザーが任意の深さに行く製品カテゴリの階層を管理できるフォームが必要なアプリケーションに取り組んでいます。私はかなり簡単にデータをページに入れることができますが、バックボーンで動作させるために必要なことは少し失われています.js。基本的に、私はネストされたULを探しています。ユーザーが1つを選択すると、カテゴリを編集/削除したり、カテゴリの下に別のカテゴリを追加したりできます。Backbone.jsと階層/ツリー

誰かがbackbone.jsで同じデータ型の任意の深い階層を持つオンラインでのケースを見つけるのが難しいです。モデルクラスにコレクションクラスのインスタンスを含めるだけですか?貯蓄はどのように達成されますか?私はこれが広い質問のビットであることを知っていますが、私は主にこれにアプローチするための一般的な提案を必要としています。

+0

が含まれているどのような葉の要素は、製品そのものですか? – papdel

+0

私はそのことについては考えていませんでしたが、ここで言及すると、インターフェイスがさらに使いやすくなります。私は今、カテゴリ階層を管理するための何かを取得しようとしていました。 –

答えて

5

親子リンクを持つアイテムの集合としてツリーをモデル化できます。したがって、あなたのモデルは次のようなものになるはずです。

JSで再帰関数呼び出しを使用してツリーを構築します。 (とにかくBACKBONE.JSの前提条件である)underscore.jsを使用してPARENT_IDことにより、機能グループの項目を呼び出す前に

function buildTree(branch, list) { 
    //recursively builds tree from list with parent-child dependencies 
    if (typeof branch == 'undefined') return null; 
    var tree = []; 
    for(var i=0; i<branch.length; i++)  
    tree.push({ 
     item: branch[i], 
     children: buildTree(list[ branch[i].id ], list) 
    }); 
    return tree; 
} 

、次に呼び出し::ここでは、ライブコードの一部です

var list = _.groupBy(arrayOfItems,'parent_id'); 
    var tree = buildTree(list[0],list); 

最後に、再帰関数呼び出しを使用してツリーをレンダリングします(ここでは例はありませんが、アイデアがあると思います)。

PS。あなたが正しいparent_idを指定すると、項目を追加/保存することは問題にはなりません。

+0

素晴らしいソリューション、ありがとう! – Casey

0

このリンクの回答が見つかります。

Backbone with a tree view widget

あなたは階層ツリーを作成するための多くの方法があります。そのうちの1人が私の質問に投稿しました。あなたがしたい場合は、それを試してみてください!私はBackbone.jsとEpoxy.jsを使ってそれを作成しました。 Epoxy.js

http://epoxyjs.org/index.html

へ のリンクこのライブラリは、さまざまなイベントをバインドするために簡単にご提供し、ツリー