Rückgrat mit einer tree-view-widgets

Ich bin der Bewertung der Backbone javascript-framework für den Einsatz in einem Projekt, das zeigt ein hierarchisches Modell in einem tree-view-widgets (denken Sie an den Windows Datei-browser).

Ich Liebe wie Rückgrat denkt über die Welt nach. Jedoch, es gibt eine Menge von Codierung beteiligt, bevor ich zu einem proof-of-concept, der hat Rückgrat tatsächlich erhalten ein hierarchisches Modell von einem server und Aktualisierung von Baum-widget. Ich habe gesehen, es gibt verschiedene Lösungen für die Vertretung der tieferen Datenstrukturen mit Rückgrat, aber ich wundere mich... hat eigentlich jemand das getan?

Nur zu wissen, dass es möglich wäre eine Hilfe. Eigentlich Benennung der Baumstruktur UI-Komponenten und Hinweise für die Bereitstellung von Daten in hierarchischen Rückgrat wäre noch besser. Ein bisschen Beispiel-code wäre unglaublich fantastisch.

Soweit Daten Größe, der Baum läuft zu 100 Knoten (Ordner) mit niedrigen 1000-Blatt-Elemente (Dokumente), und es wäre schön schrittweise laden der Daten (beispielsweise in einem Ordner in einer Zeit, als der Benutzer klickt in), aber das ist wahrscheinlich nicht ein showstopper.

Dank!

  • Nun, ich fragte die Frage zu Deep Datenstrukturen, und ich kann sagen, dass die Backbone-Relationale wirklich tut, was es sagt, es tut, und ich habe erstellt die Beziehungen, wie Sie bestehen. Ich sollte auch hinzufügen, dass für relationale Strukturen, in denen alle Knoten sind die gleichen, die ich abgeflacht, die Struktur auf dem client und verwendet eine Link-Liste auf der Seite zu Pflege der Baum-wie Struktur. Also ja, es ist möglich. Ich will hinzufügen, dass bei über 10.000 Artikeln, Firefox 2 wirklich abbricht. Chrome ist performant.
  • Danke für die info. Würde Sie diesen Weg gehen wieder, oder würden Sie ein system verwenden, das unterstützt die Hierarchie nativ?
  • Es hängt davon ab, was der server liefert. In dem Fall beschrieben, der server nicht bieten, suchen und filtern auf der server-Seite, so dass alle erforderlichen Inhalte werden auf dem client. Durch das erstellen einer gefilterten Sammlung und dann die Traversierung der Knoten-Struktur, ich war in der Lage, um die Anzeige der Inhalte in einem halbwegs performanten Weg. Wenn der server in der Lage gewesen, um gefilterte Auflistungen, würde ich gegangen mit einer relational-basierten Lösung.
  • Ich habe etwas getan, auf diese Zeilen...über 4 Ebenen tief relativ ausgeglichenen Baum. Aber zu wissen, wenn ich dazu beitragen kann, ich müsste wissen, wie deine Daten organisiert an der backend? Relational, Schlüssel/Wert, und wie/was wird zurück geschickt, json/xml? Auch wenn Sie sagen, die hierarchisch füllen Sie das Modell meinst du Backbone.Model oder Backbone.Collection oder Modell in einem abstrakten Sinne von Konzept? Brauchen Sie zum Auffüllen von server " oder "auch" sync es wieder (D. H., ist es "nach dem beladen fertig" - Typ?) Es wäre toll, wenn könnten Sie aktualisieren Sie Ihre Frage mit einigen dieser info...
  • Nupul: die Daten relational, aber möglicherweise verschoben werden, Mongo. Kann an den browser zu senden mit json -, XML -, oder irgendetwas anderes, das ist praktisch. Ich meine, bevölkern das Rückgrat.Modell und Kollektion speziell. Ich brauche zwei-Wege-Synchronisation: das ist, warum Menschen nutzen Rückgrat in den ersten Platz, richtig?
InformationsquelleAutor Dean Moses | 2011-05-27
  1. 5

    eine Möglichkeit, wenn Sie nicht wollen, zu Reisen nach unten die hierarchischen Daten-Pfad einstellen, ist die Verwendung einer Nested-Set (http://en.wikipedia.org/wiki/Nested_set_model). dies ermöglicht Ihnen, speichern Sie die gesamte Sammlung in einem array (oder Liste oder was auch immer Sie es nennen wollen), und verwenden Sie die "Links" und "rechts" - Wert zu ermitteln, die Struktur und Hierarchie der Liste.

    wenn ich mich Recht erinnere, wurde diese Technik ursprünglich von build zu optimieren Datenspeicherung und Abfragen in einer relationalen Datenbank. aber ich habe es einige Male in C#/Winforms-Anwendungen, um zu vermeiden, dass eine rekursive Hierarchie von Daten, und es funktionierte gut.

    eine Implementierung dieser in javascript sollte Recht einfach sein, aber ich weiß nicht, wie gut es führen würde, mit einer großen Liste.

    InformationsquelleAutor Derick Bailey
  2. 1

    Gute Frage, ja, ich habe dies getan, bevor

    Ich habe mit Rückgrat relationalen seit ( http://backbonerelational.org/ ) 2013 , und es funktioniert gut für mich.

    Mein Szenario ist ähnlich wie bei dir, ich haben eine komplizierte JSON-Datei mit einer Menge von Sammlungen und die Sammlung in der Sammlung.

    Mit diesem plugin können Sie Sachen wie tun:

    • Hat eine Reihe von Verhältnis-Definitionen. Es bedeutet, dass Sie definieren können, ein Baum von Kollektionen/Modelle. mehr hier ( http://backbonerelational.org/#RelationalModel-relations )

    • Geben Sie die Art der Beziehung, exmple: Einige Sammlung hätte einen oder mehrere, dass ein Verweis auf eine Beziehung geben.

    Klasse Produkt erweitert Rückgrat.RelationalModel
    //nur ein Beispiel.

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

    Nehmen Lesen Sie auf der Dokumentation. Es funktioniert gut.

    Andere gute plugins, die mir helfen, in meiner Umsetzung wurde das Modell Binder ( https://github.com/theironcook/Backbone.ModelBinder )
    Es hilft zu binden mit Blick auf Modelle.

    Mache ich ok mit diesen plugins, alles funktioniert.

    Hoffe, es hilft.

    InformationsquelleAutor rcarvalho
  3. 0

    Vielleicht finden Sie Antwort auf dieser Seite.
    Ich habe versucht zu schreiben hierarchischen Struktur auf Backbone.js und Epoxy.js
    https://stackoverflow.com/questions/20639550/backbone-epoxy-js-and-hierarchies-trees

    Es schauen, wie dieses:

    • top-level-1
      • 2. Ebene, Punkt 1
        • 3. Ebene, Punkt 1
        • 3. Ebene, Punkt 2
        • 3. Ebene, Punkt 3
      • 2. Ebene, Punkt 2
        • 3. Ebene, Punkt 4
        • 3. Ebene, Punkt 5
          • level 4, Element 1
          • level 4, Element 2
          • 4. Ebene, Punkt 3
        • 3. Ebene, Punkt 6
    • top-level-2
      • 2. Ebene Punkt 3
        • 3. Ebene, Punkt 7
        • 3. Ebene, Punkt 8
        • 3. Ebene, Punkt 9
      • 2. Ebene, Punkt 4
        • 3. Ebene, Punkt 10
        • 3. Ebene, Punkt 11
        • 3. Ebene, Punkt 12,
    InformationsquelleAutor Alexey
Schreibe einen Kommentar