Rendering layout con Backbone.js

Question

Se si dovesse costruire un'applicazione singola pagina web (SPWA) utilizzando Backbone.js e jQuery con - per esempio -? Due controller che ogni richiesto un layout di pagina uniche, come è possibile rendere il layout

• ControllerA è un layout a tre colonne.
• ControllerB è un layout a due colonne.
• Il percorso di default attiva ControllerA.Welcome () -. Il rendering iniziale
• Entrambi i controller sono diversi punti di vista reso all'interno delle loro colonne che sfruttano tutto il modello di Backbone.js / vista la bontà.

Il problema

Quando l'utente richiede un percorso mappato ControllerB, l'intero fabbisogno di layout di pagina per passare al non utilizzare il layout ControllerA più a lungo. Questo avrebbe nascosto il layout di ControllerA e mostra il layout di ControllerB -. O, renda la disposizione se non già nel DOM

Il mio primo pensiero

useresti un Backbone.js vista per rendere il layout, e poi, rendono ogni colonna con la vista modello-bound?

Il mio secondo pensiero

Sarebbe si aggiunge un metodo di configurazione / layout per il controller che ha usato jQuery per rendere il layout e quindi consentire l'azione responsabile per il percorso farlo di cosa? Utilizzando jQuery all'interno del controllore si sente un po 'fuori di me, ma, voglio il controller di essere responsabile di assicurare il layout destra è visibile per la sua rotte.

Ecco un frammento per il mio secondo pensiero:

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...');
    }
});

Grazie

Grazie per aver dedicato del tempo per rispondere. Lo apprezzo!

Answer 1

Io preferisco avere lo scheletro dell'applicazione disposte sulla pagina già. In modo da avere il layout completo con i diversi elementi sulla pagina e si crea la visualizzazione spina dorsale contro quegli elementi in modo che siano correttamente stabiliti.

Questo funziona bene quando si dispone di un unico layout, le cose ottenere divertimento quando si dispone di più. Si potrebbe mettere tutti i layout della pagina e nascondere le diverse configurazioni a seconda della logica. Potete vedere il layout è di essere la vista iniziale di una gerarchia. Quindi si esegue il rendering del layout e quindi avere la vista del carico.

Non v'è alcun reale modo di fare questo. Ci sono pro e contro per ogni. Una cosa che non vorrei fare è rendere il layout nel controller. Ho messo tutto il rendering HTML e in vista in modo da poter affrontare con la logica del controller e il modello (si pensi MVC qui).

Answer 2

Io tendo a concordare con Julien - è bello per mantenere i layout come apolidi possibile. Tutto è sempre disposto sulla pagina, in forma di scheletro, almeno. Quando da visualizzare il layout particolare o esigenze di configurazione, è pigramente-rendering dei suoi contenuti, e visualizzare quella parte della UI con i CSS. Mutuamente esclusive classi CSS sono utili per questo, cose come: "progetti-aperto", "Documenti-aperto", "note-aperte"

.

Answer 3

Sto progettando un sistema intranet module-based utilizzando backbone.js e io fondamentalmente utilizzare il seguente algoritmo su carico del documento.

• Crea AppController, il controllore Singleton per l'applicazione.
• L'AppController crea il MainView, questa è la vista responsabile del rendering lo scheletro della pagina e la manipolazione clic per voci persistenti sulla pagina (pulsanti di login / logout, ecc)
• Il MainView crea una serie di childViews per le diverse parti della pagina, la navigazione, il pangrattato, intestazione, barra degli strumenti, contentContainer, ecc Questi sono gli infissi della domanda e non cambiano, anche se il loro rispettivo contenuto fa. Il contentArea in particolare, può contenere qualsiasi layout.
• L'AppController attraversa i moduli registrati, dando inizio al mainModuleController per ciascuno di essi. Questi hanno tutti gli spazi dei nomi di routing schemi.
• Backbone.history.start ()

I moduleControllers tutto Accedere alla AppController su init. Quando la cattura di un hash-location, inviano un evento pageChange alla AppController contenente un oggetto pageManifest. L'oggetto pageManifest contiene tutte le informazioni necessarie per impostare le rispettive viste, come pangrattato informazioni, informazioni di intestazione, e, soprattutto, un riferimento a un contentView esemplificato. L'AppController utilizza le informazioni nella pageManifest per impostare le diverse viste persistenti, elimina il primo contentView nella contentContainer e inserisce il contentView fornito dal modulo nel contenitore.

In questo modo, diversi progettisti possono lavorare su diversi moduli e tutto quello che devono sapere è la specifica dell'oggetto pageManifest e come il contentView dovrebbe apparire. Essi possono istituire sistemi di routing complessi dei loro propri, utilizzare i propri modelli e contentViews personalizzati (se abbiamo intenzione di avere una libreria di listviews, objectViews, ecc ereditare da).

Siamo in fase di progettazione in questo momento, quindi non posso garantire che in realtà questo è il disegno saremo finalmente utilizziamo o che non troviamo tutti i fori in esso, ma concettualmente, pensiamo che sia il suono. Commenti?

Answer 4

Sto avendo lo stesso problema esatto indipendentemente da Backbone o di qualsiasi altro js quadro / biblioteca.

Immaginate di avere un segno nella visualizzazione Maschera che richiede un layout a singola colonna e si inietta la vista in quella un unico div.

Poi, una volta firmato nel successo, in qualche modo un altro layout è resa (diciamo una zona HEADER, FOOTER zone, la zona a sinistra e poi la zona MAIN (colonna di destra) per tutto il resto.

L'intestazione potrebbe contenere una vista LOGO (se ne ha la funzionalità) e una vista MENU GLOBAL / USER. La zona SINISTRA conterrà la vista NAV PRIMARIA.

Poi un ulteriore complessità .; Ogni collegamento all'interno primario vista NAV carichi un nuovo sub layout di pronto per ulteriori viste di iniezioni in.

Non voglio i controllori regolari / Vista a cura di ciò che il layout è attualmente resa, solo che il loro elemento contenitore esiste ed è pronto per essere iniettato.

Avevo pensato di usare percorsi (non nel senso tradizionale) in un modo intelligente qualcosa come:

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 
}

Il che significa che se il percorso è stato "/ sezione1 / qualcosa / sub / page / entro / sezione / 1" i due matchers percorso di cui sopra "regex per rappresentare qualche cosa ma sign_in" e "/ sezione1 / *" sarebbero entrambi run significato che lo schema primario sarebbe resa e quindi la disposizione sub section1 sarebbe reso dopo se ha senso.

Poi tutti gli altri controller normali utilizzano instradamenti in senso tradizionale.

Ci deve essere un bel modo per gestire i layout e garantire quei layout, layout sub e le viste sono abbattute in modo sicuro per garantire le perdite di memoria vengono gestite tra le altre ragioni.

piacerebbe sentire qualcuno che ha progettato e realizzato qualcosa di elegante.