2011-10-07 1 views
12

Sto lavorando a un'applicazione che ha bisogno di un modulo che consenta all'utente di gestire una gerarchia di categorie di prodotti che raggiungono una profondità arbitraria. Posso facilmente ottenere i dati sulla pagina, ma sono un po 'perso su ciò che devo fare per far funzionare una cosa del genere con backbone.js. Fondamentalmente, sto cercando gli UL annidati. Quando l'utente ne seleziona uno, voglio che siano in grado di modificare/eliminare la categoria o aggiungere un'altra categoria al di sotto di essa.Backbone.js e gerarchie/alberi

Ho problemi a trovare casi online in cui qualcuno ha una gerarchia arbitrariamente profonda dello stesso tipo di dati in backbone.js. Dovrei semplicemente fare in modo che la mia classe del modello contenga un'istanza della mia classe di raccolta? Come si potrebbe realizzare il risparmio? So che questa è una domanda un po 'ampia, ma ho soprattutto bisogno di alcuni suggerimenti generali su come affrontare questo (o meglio ancora, un campione da qualche parte che non ho guardato).

+0

Gli elementi foglia sono prodotti stessi? – papdel

+0

Non ci avevo pensato, ma ora che ne parli, renderebbe l'interfaccia ancora più utilizzabile. Stavo solo cercando di ottenere qualcosa per gestire la gerarchia delle categorie per il momento. –

risposta

5

È possibile modellare un albero come una raccolta di elementi con collegamenti padre-figlio. Così il vostro modello dovrebbe avere qualcosa di simile:

 id:   id, 
     parent_id: parent_id 

poi costruire un albero da una collezione utilizzando chiamate di funzione ricorsive in JS. Ecco un pezzo di codice dal vivo:

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

Prima di chiamare gli elementi del gruppo funzione di parent_id utilizzando underscore.js (che è un prerequisito per backbone.js comunque), e quindi chiamare:

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

Infine, renda l'albero usando di nuovo le chiamate ricorsive (nessun esempio qui, ma credo che tu abbia avuto l'idea).

PS. Aggiungere/salvare un elemento non è un problema se indichi right parent_id.

+0

Ottima soluzione, grazie! – Casey

0

È possibile trovare la risposta su questo link.

Backbone with a tree view widget

si hanno molti modi per creare albero gerarchico. Uno di questi ho postato nella mia domanda. Se vuoi, provalo! Ho usato Backbone.js ed Epoxy.js per crearlo. Link Epoxy.js

http://epoxyjs.org/index.html

Questa libreria di fornire facilmente associare eventi quello che contiene albero