Rendering Layouts mit Backbone.js

Question

Wenn Sie eine einzelne Seite Web-Anwendung (SPWA) mit Backbone.js und jQuery bauen waren mit - zum Beispiel - zwei Controller, dass jeder benötigte ein einzigartiges Seitenlayout, wie würden Sie das Layout machen

• ControllerA ist ein Drei-Spalten-Layout.
• ControllerB ist eine zweispaltige Layout.
• Die Standardroute aktiviert ControllerA.Welcome (.) - den anfänglichen Rendering
• Beide Controller haben unterschiedliche Ansichten in ihren Spalten gemacht, die Vorteile aller Güte der Backbone.js Modell / Ansicht.

Das Problem

Wenn der Benutzer eine Route zu ControllerB, die gesamte Seitenlayout muss sich ändern, um nicht mehr verwenden, die ControllerA Layout abgebildet anfordert. Dies würde ControllerA Layout verstecken und ControllerB Layout zeigen -. Oder das Layout dargestellt werden, wenn nicht bereits im DOM

Mein erster Gedanke

Would verwenden Sie ein Backbone.js Ansicht, die das Layout zu machen, und dann machen Sie jede Spalte mit seinem Modell-gebundenen Ansichten?

Mein zweiter Gedanke

füge hinzu, ein Setup / Layout-Methode zu dem Controller, die jQuery verwendet, um das Layout zu machen und dann der Aktion ermöglichen, die für die Strecke es der Sache zu tun? jQuery im Controller fühlt sich ein wenig aus mir, aber ich möchte die Steuerung für die Gewährleistung der richtigen Layout verantwortlich sein sichtbar für seine Routen.

Hier ist ein Ausschnitt für meinen zweiten Gedanken:

var Controller = Backbone.Controller.extend
({
    routes :
    {
       "" : "welcome" // default action
    }
    /** Constructor **/
    ,initialize: function(options)
    {
        console.log('Workspace initialized');               
    }
    // LAYOUT
    ,renderLayout : function ()
    {
        console.log('Rendering Layout.');
        var $ = window.$;
        var layout = require('js/layout/app/big_menu');
        $(layout.parent).html(layout.html);
    }
    // ACTIONS
    /** Default Action **/
    ,welcome : function ()
    {
        this.renderLayout();
        console.log('Do the whole model/view thing...');
    }
});

Danke

Vielen Dank für die Zeit, um zu reagieren nehmen. Ich schätze es!

Answer 1

Ich ziehe das Skelett der Anwendung haben bereits auf der Seite angelegt. So können Sie das komplette Layout mit den verschiedenen Elementen auf der Seite haben und erstellen Sie Ihr Rückgrat Ansicht gegen die Elemente, so dass sie richtig angelegt werden.

Das funktioniert gut, wenn Sie ein einzelnes Layout haben, Dinge Spaß, wenn Sie mehrere haben. Sie könnten alle Layouts auf der Seite platzieren und verstecken die verschiedenen Konfigurationen auf Ihrer Logik abhängig. Sie können sehen, das Layout hat sich die anfängliche Ansicht einer Hierarchie zu sein. So können Sie das Layout machen und dann die Ansichten Last hat.

Es gibt keine wirkliche Möglichkeit, dies zu tun. Es gibt Vor-und Nachteile für jeden. Eine Sache würde ich nicht tun, ist das Layout in der Steuerung zu übertragen. Ich habe alles Rendering und html in Ansichten, damit ich mit der Logik auf dem Controller und Modell (man denkt MVC hier) umgehen kann.

Answer 2

Ich neige dazu, mit Julien zustimmen - es ist schön zu halten Layouts als staatenlos wie möglich. Alles ist immer auf der Seite angelegt, in Skelettform zumindest. Wenn das bestimmte Layout oder Konfigurationsanforderungen angezeigt wird, machen lazily-Sie den Inhalt, und mit CSS den Teil der Benutzeroberfläche angezeigt werden soll. Sich gegenseitig ausschließe CSS-Klassen sind nützlich für diese, Dinge wie: "Projekte-open", "Dokumente offen", "Notizen-open"

.

Answer 3

Ich bin ein Modul-basiertes Intranet-System entwerfen Backbone.js mit und ich verwende grundsätzlich den folgenden Algorithmus auf Dokument laden.

• Erstellen AppController, die Singleton-Controller für die App.
• Die AppController die Mainview schafft, ist dies die Ansicht verantwortlich für das Skelett der Seite Rendering und Klicks für persistente Objekte auf der Seite (Login / Logout-Buttons, etc.) Umgang mit
• Die Mainview erstellt eine Reihe von childViews für die verschiedenen Teile der Seite, Navigation, Paniermehl, header, Symbolleiste, Contentcontainer, etc. Dies sind die Befestigungen der Anwendung und sie ändern sich nicht, auch wenn ihre jeweiligen Inhalt der Fall ist. Die content insbesondere jedes Layout enthalten.
• Die AppController läuft durch die registrierten Module, die mainModuleController für jeden von ihnen zu initiieren. Diese haben alle Namensräume Schemata Routing.
• Backbone.history.start ()

Die moduleControllers alle Verstärkung Zugang zum AppController auf init. Wenn eine Hash-Lage zu kontrollieren, senden sie ein pageChange Ereignis an der AppController ein pageManifest Objekt enthält. Das pageManifest Objekt enthält alle erforderlichen Informationen, um die jeweiligen Ansichten zu setzen, wie Paniermehl Info, Header-Info, und was am wichtigsten ist, einen Verweis auf eine instanzierte content. Die AppController verwendet die Informationen in der pageManifest Setup die verschiedenen persistent Ansichten, löscht das frühere content im Contentcontainer und fügt die content durch das Modul in den Behälter vorgesehen ist.

Auf diese Weise können verschiedene Designer auf verschiedenen Modulen arbeiten und alles, was sie wissen müssen, ist die Spezifikation des pageManifest Objekt und wie die content aussehen sollte. Sie können komplexe Routing-Systeme ihrer eigenen Werte einstellen, ihre eigenen Modelle und individuelle contentViews (obwohl wir eine Bibliothek von Listviews, objectViews, etc zu vererben haben, planen).

Wir in der Entwurfsphase sind gerade jetzt, so dass ich nicht wirklich garantieren kann, dass dies der Entwurf, den wir schließlich verwenden werden, oder dass wir finden keine Löcher, sondern konzeptionell, halten wir es für den Sound. Kommentare?

Answer 4

Ich habe genau das gleiche Problem, unabhängig von Backbone oder anderen js Rahmen / Bibliothek.

Stellen Sie sich eine SIGN IN FORM Ansicht haben, die eine einzelne Spalten-Layout erfordert und Sie spritzen den Blick in das eine einzige div.

Dann unterzeichnet einmal erfolgreich, irgendwie ein anderes Layout gerendert wird (sagen sie mal eine Header-Zone, Footer Zone, Zone nach links und dann der Hauptzone (rechte Spalte) für alles anderes.

Der Header kann eine LOGO Ansicht enthält (falls Funktionalität) und eine GLOBAL / USER MENU Ansicht. Die LINKE Zone der primäre NAV Ansicht enthalten.

Dann wird eine weitere Komplexität .; Jeder Link innerhalb der primären NAV Ansicht Lasten bis einen neuen Unter Layout bereit für weitere Ansichten, mich in zu injizieren.

Ich mag nicht die regulären Controller / Ansichten kümmern, was das Layout zur Zeit gemacht wird, nur, dass ihr Containerelement vorhanden ist, und ist bereit, in injiziert werden.

Ich dachte über Routen (nicht im herkömmlichen Sinne) in einer klugen Weise so etwas wie:

function LayoutController() {
App.addRouteMatcher("/sign_in/*", this.renderSignInLayout); // single column
App.addRouteMatcher("regex to represent anything but sign_in", this.renderMainLayout); // header, footer, primary nav, main zone
App.addRouteMatcher("/section1/*", this.renderSubLayoutForSection1); // puts a 1 column layout in the main zone
App.addRouteMatcher("/section2/*", this.renderSubLayoutForSection2); // puts a 2 column layout in the main zone 
}

Was bedeutet, dass, wenn die Route ist "/ section1 / was / sub / Seite / in / section / 1" die beiden Routen Matcher oben "regex alles darzustellen, aber sign_in" und "/ section1 / *" würde beide laufen, was bedeutet, dass das primäre Layout gemacht und dann würde das section1 Unter Layout würde gemacht, nachdem wenn das macht Sinn.

Dann werden alle anderen normalen Controller verwenden Routen im herkömmlichen Sinne.

Es muss ein schöner Weg, um Layouts zu verwalten und diese Layouts zu gewährleisten, Unter Layouts und Ansichten sind sicher abgerissen Speicherlecks, um sicherzustellen, unter anderen Gründen behandelt werden.

würde gerne jemanden zu hören, die entworfen und umgesetzt haben etwas elegant.