Reutilización de controles y widgets Backbone.js

Question

¿Existe un buen modelo para reutilizar componentes de UI escritos en Backbone.js?

Mi equipo mantiene una gran aplicación web que está escrita principalmente en código del lado del servidor, pero estamos descubriendo que estamos haciendo cada vez más trabajo del lado del cliente. Tenemos varios componentes de interfaz de usuario grandes que se escribieron en jQuery, y son realmente demasiado complejos para mantenerlos con solo una biblioteca de manipulación DOM. Necesitamos un marco de aplicación del lado del cliente.

Una cosa buena que ofrece el modelo de complemento jQuery es la facilidad de reutilización. Simplemente puede crear algunos elementos HTML con los ID adecuados y conectarlos con $(function(){}). Definitivamente tendríamos que lograr algo similar con Backbone si lo adoptamos.

La mayoría de los ejemplos muestran cómo crear una aplicación completamente en Backbone, lo cual es genial, pero no vamos a volver a implementar nuestra aplicación en JavaScript pronto. Nuestro uso de un marco del lado del cliente se limitaría a los controles de IU complejos con mucha lógica de negocios en ellos.

Otra consideración es que tenemos una solución de paquete de JavaScript en su lugar. Me preocupa que agrupar una gran cantidad de elementos troncales podría significar que terminamos con controles sin cabeza cargando y ejecutándose en segundo plano.

¿Puedes construir controles Backbone y empaquetarlos como complementos jQuery? ¿Hay buenos recursos disponibles sobre este tipo de arquitectura?

Answer 1

Para mí, una de las mejores partes del uso de Backbone es esencialmente lo que está describiendo. La orientación a objetos de Backbone hace que sea muy fácil construir un 'widget' específico u otra pieza de código reutilizable a la que pueda enlazar eventos/plantillas/datos. No necesariamente querrá hacer estos plugins jQuery, simplemente porque no proporcionaría muchos beneficios sobre la sintaxis de Backbone.

Por ejemplo, puede crear una clase de control y vincular un evento de clic para activar el método foo.

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

Cada vez que desee un elemento DOM para utilizar este comportamiento, se crea un nuevo objeto de control, y se unen al elemento utilizando 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' }); 

(Es factible podría envolver esas llamadas en un plugin de jQuery)

Esto realmente ejemplo sencillo para mostrar lo que sería el flujo de trabajo, puede llegar muy intensa con modelos/colecciones de columna vertebral y el subrayado de plantillas de motor para crear algunas clases reutilizables dinámicas & realmente robustas.