Share
Backbone sta diventando molto popolare come framework di sviluppo di applicazioni web. Insieme a questa popolarità arrivano innumerevoli estensioni e plug-in per migliorare la potenza della struttura e riempire i buchi che altri sentono necessario riempire. Diamo un'occhiata ad alcune delle migliori scelte.
Sviluppato da Derick Bailey, questa estensione è abbastanza grande ed è la mia preferita. Piuttosto che aggiungere una o due caratteristiche a Backbone, Derick ha deciso di riempire tutti i buchi più grandi che riteneva esistessero. Ecco cosa dice in merito nel file readme del progetto GitHub.
"Backbone.Marionette è una libreria di applicazioni composite per Backbone.js che mira a semplificare la costruzione di applicazioni JavaScript su larga scala.È una raccolta di schemi di progettazione e implementazione comuni trovati nelle applicazioni che I (Derick Bailey) ha realizzato con Backbone e comprende vari pezzi ispirati a architetture di applicazioni composite, come il framework "Prism" di Microsoft. "
Diamo uno sguardo più da vicino a ciò che ci fornisce Marionette:
Ho solo graffiato la superficie di ciò che può fare Marionette. Consiglio vivamente di andare su GitHub e leggere la loro documentazione sul Wiki.
Inoltre, Andrew Burgess copre Marionette nel suo corso Tuts + Premium Backbone Patterns and Techniques.
Backbone.Validation è progettato per riempire una piccola nicchia di un problema: vale a dire, la validazione del modello. Ci sono diverse estensioni di validazione per Backbone, ma questo sembra aver raccolto il massimo rispetto dalla comunità.
Piuttosto che dover scrivere a convalidare metodo per i tuoi modelli, puoi creare un convalida proprietà per i tuoi modelli, che è un oggetto che specifica ciascuno degli attributi che desideri convalidare e un elenco di regole di convalida per ciascuno di questi attributi. È inoltre possibile specificare i messaggi di errore per ciascun attributo e passare in funzioni personalizzate per la convalida di un singolo attributo. Puoi vedere un esempio qui sotto, che è modificato da uno degli esempi sul loro sito web.
var SomeModel = Backbone.Model.extend (validation: nome: richiesto: true, 'address.street': richiesto: true, 'address.zip': length: 4, age: range: [1, 80], email: pattern: 'email', // fornisce il tuo messaggio di errore msg: "Inserisci un indirizzo email valido", // funzione di convalida personalizzata per 'someAttribute' someAttribute: function (value) if (value! == 'somevalue') return 'Error message';);
Esistono innumerevoli validatori e schemi incorporati che è possibile verificare, e c'è persino un modo per estendere l'elenco con i propri validatori globali. Questo plugin Backbone non rende divertente la validazione, ma elimina certamente qualsiasi scusa per non aggiungere la convalida. Si prega di visitare il loro sito per ulteriori esempi e una spiegazione più profonda su come utilizzare questo meraviglioso strumento.
Backbone.LayoutManager punta a migliorare le viste di Backbone. Come Backbone.Marionette, introduce codice di cleanup per prevenire perdite di memoria, gestisce tutto il boilerplate e lascia solo la configurazione e il codice specifico dell'applicazione. A differenza di Marionette, LayoutManager si concentra in particolare su Views.
Poiché LayoutManager si concentra esclusivamente su Views, può fare di più per le visualizzazioni rispetto a Marionette. Ad esempio, LayoutManager è in grado di eseguire il rendering asincrono, nel caso in cui si desideri caricare i modelli dinamicamente da file esterni.
LayoutManager può anche gestire le sottoview, anche se in modo molto diverso da Marionette. In ogni caso, è in gran parte la configurazione, che rende le cose estremamente semplici ed elimina il 90% del lavoro che avresti dovuto fare, se stavi cercando di implementarlo tutto da solo. Dai un'occhiata qui sotto per un semplice esempio per aggiungere tre sottoview a una vista:
Backbone.Layout.extend (views: "header": nuovo HeaderView (), "section": nuovo ContentView (), "footer": new FooterView ());
Come al solito, assicurati di fare riferimento alla pagina e alla documentazione di GitHub per saperne di più.
Backbone.ModelBinder crea collegamenti tra i dati nei tuoi modelli e il markup mostrato dalle tue visualizzazioni. Puoi già farlo legando all'evento change sui tuoi modelli e rendendo di nuovo la vista, ma ModelBinder è più efficiente e più semplice da usare.
Dai un'occhiata al codice qui sotto:
Accentsconagua
var MyView = Backbone.View.extend (template: _.template (myTemplate), initialize: function () // Old Backbone.js way this.model.on ('change', this.render, this); / / o il nuovo Backbone 0.9.10+ come this.listenTo (this.model, 'change', this.render);, render: function () this. $ el.html (this.template (this.model. toJSON ()));); Il problema con questo approccio è che ogni volta che viene modificato un singolo attributo, abbiamo bisogno di ri-renderizzare l'intera vista. Inoltre, con ogni rendering, dobbiamo convertire il modello in JSON. Infine, se vuoi che il binding sia bidirezionale (quando il modello si aggiorna, così fa il DOM e viceversa), allora dobbiamo aggiungere ancora più logica alla vista.
Questo esempio stava usando Underscore modello funzione. Supponiamo che il modello che abbiamo passato in esso assomigli:
Usando i tag <%= e %> fare il modello la funzione sostituisce quelle aree con il nome di battesimo e cognome proprietà esistenti nel JSON che abbiamo inviato dal modello. Supponiamo che il modello abbia entrambi questi attributi.
Con ModelBinder, invece, possiamo rimuovere quei tag di template e inviarli normalmente HTML. ModelBinder vedrà il valore di nome attributo sul ingresso tag e assegnerà automaticamente il valore del modello per quella proprietà a valore attributo del tag. Ad esempio, il primo ingresso'S nome è impostato su "firstName". Quando usiamo ModelBinder, lo vedremo e poi lo imposteremo ingresso'S valore alla modella nome di battesimo proprietà.
Di seguito, vedremo come il nostro precedente esempio dovrebbe occuparsi del passaggio a ModelBinder. Inoltre, renditi conto che il legame è bidirezionale, quindi se il ingresso i tag sono aggiornati, il modello verrà aggiornato automaticamente per noi.
Modello HTML:
Vista JavaScript:
var MyView = Backbone.View.extend (template: myTemplate, initialize: function () // Non c'è più binding in qui, render: function () // Lancia l'HTML direttamente in questo. $ el.html (this .template); // Usa ModelBinder per associare il modello e visualizzare modelBinder.bind (this.model, this.el););
Ora abbiamo modelli HTML puliti e abbiamo bisogno solo di una singola riga di codice per collegare l'HTML della vista e i modelli usando insieme modelBinder.bind. modelBinder.bind accetta due argomenti obbligatori e un argomento opzionale. Il primo argomento è il modello con i dati che verranno associati al DOM. Il secondo è il nodo DOM che verrà attraversato in modo ricorsivo, cercando i binding da fare. L'argomento finale è a rilegatura oggetto che specifica regole avanzate per il modo in cui devono essere eseguite le associazioni, se non ti piace l'utilizzo predefinito.
ModelBinder può essere utilizzato su più di un semplice ingresso tag. Funziona su qualsiasi elemento. Se l'elemento è un tipo di input di modulo, come ingresso, selezionare, o textarea, aggiornerà i valori di tali elementi, di conseguenza. Se ti leghi a un elemento, come a div o campata, posizionerà i dati del modello tra i tag di apertura e di chiusura di quell'elemento (ad es. [i dati vanno qui]).
C'è molto più potere dietro Backbone.ModelBinder rispetto a quello che ho dimostrato qui, quindi assicurati di leggere la documentazione sul repository GitHub per imparare tutto su di esso.
Questo avvolge le cose. Ho solo coperto una manciata di estensioni e plugin, ma questi sono quelli che considero maggiormente utili.
Il paesaggio Backbone è in continua evoluzione. Se desideri visualizzare un elenco completo delle varie estensioni Backbone disponibili, visita questa pagina wiki, che il team Backbone aggiorna regolarmente.
