Backbone.js和層次結構/樹

我正在研究一個需要表單的應用程序，該表單允許用戶管理產品類別的層次結構，以達到任意深度。我可以很容易地將數據獲取到頁面上，但是我爲了使這種事情與backbone.js一起工作需要做些什麼而有點失落。基本上，我正在尋找嵌套的UL。當用戶選擇一個時，我希望他們能夠編輯/刪除類別或在其下添加其他類別。Backbone.js和層次結構/樹

我很難在網上找到有人在backbone.js中擁有相同數據類型的任意深層次結構的情況。我只是讓我的模型類包含我的集合類的一個實例？如何完成儲蓄？我知道這是一個廣泛的問題，但我主要需要一些關於如何解決這個問題的一般性建議（或者更好的是，我還沒有看過一個示例）。

來源

2011-10-07 Will Gant

葉元素是產品本身？ – papdel

我沒有想過這樣做，但現在你提到它，它會使界面更加可用。我現在只是試圖去管理類別層次結構。 –

您可以將樹建模爲具有父子鏈接的項目集合。所以你的模型應該是這樣的：

 id:   id, 
     parent_id: parent_id

然後從集合中使用JS中的遞歸函數調用來構建樹。這裏是一塊活代碼：

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; 
}

使用underscore.js（這是Backbone.js的一個先決條件反正）調用由PARENT_ID功能組項目之前，然後調用：

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

最後，再次使用遞歸函數調用樹（這裏沒有例子，但我相信你有這個想法）。

PS。如果您指出正確的parent_id，則添加/保存項目不會成爲問題。

來源

2011-12-15 16:15:51

偉大的解決方案，謝謝！ – Casey

你可以在這個鏈接找到答案。

Backbone with a tree view widget

你有很多方法來創建分層樹。其中之一，我張貼在我的問題。如果你想，試試吧！我使用Backbone.js和Epoxy.js來創建它。鏈接Epoxy.js

http://epoxyjs.org/index.html

該庫提供您輕鬆綁定不同的事件包含什麼樹

來源

2013-12-18 09:03:59 Alexey

Backbone.js和層次結構/樹

回答

相關問題