Riutilizzo dei controlli e dei widget di Backbone.js

Question

Esiste un buon modello per riutilizzare i componenti dell'interfaccia utente scritti in Backbone.js?

Il mio team gestisce una grande applicazione web che è scritta principalmente nel codice lato server, ma stiamo scoprendo che stiamo facendo sempre più lavoro sul lato client. Abbiamo diversi componenti UI di grandi dimensioni scritti in jQuery e sono davvero troppo complessi da gestire con una semplice libreria di manipolazione DOM. Abbiamo bisogno di un framework applicativo sul lato client.

Una cosa carina che il modello di plugin jQuery offre è la facilità di riutilizzo. Puoi semplicemente creare alcuni elementi HTML con gli ID appropriati e collegarli con $(function(){}). Avremmo sicuramente bisogno di realizzare qualcosa di simile con Backbone se lo avessimo adottato.

La maggior parte degli esempi disponibili mostra come creare un'applicazione interamente in Backbone, il che è ottimo, ma non stiamo per implementare nuovamente la nostra app in JavaScript in qualsiasi momento. Il nostro utilizzo di un framework lato client sarebbe limitato ai complessi controlli dell'interfaccia utente con un sacco di logica aziendale in essi.

Un'altra considerazione è che abbiamo una soluzione di raggruppamento JavaScript installata. Sono preoccupato che unire un sacco di elementi Backbone insieme potrebbe significare che ci ritroviamo con controlli headless che si caricano e girano in background.

È possibile creare controlli Backbone e impacchettarli come plugin jQuery? Ci sono buone risorse disponibili su questo tipo di architettura?

Answer 1

Per me una delle parti migliori dell'utilizzo di Backbone è essenzialmente ciò che stai descrivendo. L'orientazione agli oggetti di Backbone rende davvero facile creare un "widget" specifico o altro pezzo di codice riutilizzabile a cui è possibile associare eventi/modelli/dati. Non vorresti necessariamente creare questi plugin jQuery, semplicemente perché non fornirebbe molti vantaggi rispetto alla sintassi di Backbone.

Ad esempio, è possibile creare una classe di controllo e associare un evento click per attivare il metodo foo su di esso.

var Control = Backbone.View.extend({ 
    id:null, 
    events: { 
     'click' : 'foo' 
    }, 
    foo: function(){ 
     console.log(this.id); 
    } 
}) 

Ogni volta che si desidera un elemento DOM di usare questo comportamento, si crea un nuovo oggetto di controllo, e associarlo all'elemento utilizzando jQuery.

//I say foo when you click me 
var foo = new Control({el: $("#foo"), id:'foo' }); 

//I say bar when you click me 
var bar = new Control({el: $("#bar"), id:'bar' }); 

(È tenerne potrebbe avvolgere le chiamate in un plugin jQuery)

Questo è un davvero semplice esempio per mostrare ciò che il flusso di lavoro sarebbe, è possibile ottenere davvero intenso con modelli/collezioni di spina dorsale e la sottolineatura di motore di template per creare alcune classi riutilizzabili dinamiche & dinamiche.