Share
Backbone se está volviendo muy popular como marco de desarrollo de aplicaciones web. Junto con esta popularidad, se incluyen innumerables extensiones y complementos para mejorar el poder del marco y rellenar los orificios que otros necesitaban rellenar. Echemos un vistazo a algunas de las mejores opciones..
Desarrollada por Derick Bailey, esta extensión es bastante grande y es mi favorita personal. En lugar de agregar una o dos características a Backbone, Derick decidió completar todos los huecos más grandes que él sentía que existían. Esto es lo que dice al respecto en el archivo Léame del proyecto GitHub.
"Backbone.Marionette es una biblioteca de aplicaciones compuestas para Backbone.js que apunta a simplificar la construcción de aplicaciones de JavaScript a gran escala. Es una colección de patrones comunes de diseño e implementación encontrados en las aplicaciones que I (Derick Bailey) he estado construyendo con Backbone. e incluye varias piezas inspiradas en arquitecturas de aplicaciones compuestas, como el marco "Prism" de Microsoft.
Echemos un vistazo más de cerca a lo que Marionette nos proporciona:
Solo he arañado la superficie de lo que Marionette puede hacer. Definitivamente recomiendo ir a GitHub y leer su documentación en la Wiki.
Además, Andrew Burgess cubre a Marionette en su curso Tuts + Premium Advanced Backbone Patterns and Techniques.
Backbone.Validation está diseñado para llenar un pequeño nicho de un problema: la validación de modelos. Hay varias extensiones de validación para Backbone, pero esta parece haber obtenido el mayor respeto de la comunidad..
En lugar de tener que escribir una validar método para tus modelos, puedes crear un validación propiedad para sus modelos, que es un objeto que especifica cada uno de los atributos que desea validar y una lista de reglas de validación para cada uno de esos atributos. También puede especificar mensajes de error para cada atributo y pasar funciones personalizadas para validar un solo atributo. Puede ver un ejemplo a continuación, que se modifica de uno de los ejemplos en su sitio web.
var SomeModel = Backbone.Model.extend (validation: name: required: true, 'address.street': required: true, 'address.zip': length: 4, age: range: [1, 80], correo electrónico: patrón: 'correo electrónico', // suministre su propio mensaje de error. Mensaje: "Ingrese una dirección de correo electrónico válida", // función de validación personalizada para 'algún atributo' algoAtributo: función (valor) if (value! == 'somevalue') return 'Message message';);
Hay innumerables validadores y patrones incorporados con los que se puede verificar, e incluso hay una manera de ampliar la lista con sus propios validadores globales. Este complemento Backbone no hace que la validación sea divertida, pero sin duda elimina cualquier excusa para no agregar validación. Visite su sitio para obtener más ejemplos y una explicación más detallada sobre cómo utilizar esta maravillosa herramienta..
Backbone.LayoutManager se trata de mejorar las vistas de Backbone. Al igual que Backbone.Marionette, trae un código de limpieza para evitar pérdidas de memoria, maneja todo el boilerplate y te deja solo con la configuración y el código específico de la aplicación. A diferencia de Marionette, LayoutManager se enfoca específicamente en Vistas.
Debido a que LayoutManager se enfoca únicamente en las vistas, puede hacer más por las vistas que Marionette. Por ejemplo, LayoutManager es capaz de realizar representaciones asíncronas, en el caso de que desee cargar dinámicamente sus plantillas desde archivos externos.
LayoutManager también puede manejar subvistas, aunque de una manera muy diferente a Marionette. De cualquier manera, sin embargo, es en gran medida la configuración, lo que hace que las cosas sean extremadamente simples y elimina el 90% del trabajo que hubieras necesitado hacer, si estuvieras intentando implementar todo esto por tu cuenta. Vea a continuación un ejemplo sencillo para agregar tres subvistas a una vista:
Backbone.Layout.extend (views: "header": new HeaderView (), "section": new ContentView (), "footer": new FooterView ());
Como de costumbre, asegúrese de consultar la página y la documentación de GitHub para obtener más información..
Backbone.ModelBinder crea enlaces entre los datos en sus modelos y el marcado que muestran sus vistas. Ya puede hacer esto enlazando el evento de cambio en sus modelos y renderizando la vista nuevamente, pero ModelBinder es más eficiente y más fácil de usar.
Echa un vistazo al siguiente código:
Accentsconagua
var MyView = Backbone.View.extend (template: _.template (myTemplate), initialize: function () // Old Backbone.js forma this.model.on ('change', this.render, this); / / o el nuevo Backbone 0.9.10+ es la forma en que this.listenTo (this.model, 'change', this.render);, render: function () this. $ el.html (this.template (this.model. toJSON ()));); El problema con este enfoque es que cada vez que se cambia un solo atributo, debemos volver a representar la vista completa. Además, con cada render, necesitamos convertir el modelo a JSON. Finalmente, si queremos que el enlace sea bidireccional (cuando el modelo se actualiza, también lo hace el DOM y viceversa), debemos agregar aún más lógica a la vista.
Este ejemplo estaba usando el guión bajo. modelo función. Asumamos que la plantilla que hemos pasado se ve así:
Usando las etiquetas <%= y %> hacer el modelo función reemplazar esas áreas con el nombre de pila y apellido propiedades que existen en el JSON que enviamos desde el modelo. Asumiremos que el modelo también tiene ambos atributos.
Con ModelBinder, en su lugar, podemos eliminar esas etiquetas de plantillas y enviarlas normalmente. HTML. ModelBinder verá el valor de la nombre atributo en el entrada etiqueta, y asignará automáticamente el valor del modelo para esa propiedad a la valor Atributo de la etiqueta. Por ejemplo, la primera entradaes nombre se establece en "nombre". Cuando usamos ModelBinder, lo veremos y luego lo estableceremos entradaes valor a la modelo nombre de pila propiedad.
A continuación, verá cómo se vería nuestro ejemplo anterior después de cambiar a usar ModelBinder. Además, tenga en cuenta que la unión es bidireccional, por lo que si la entrada Las etiquetas se actualizan, el modelo se actualizará automáticamente para nosotros..
Plantilla HTML:
Vista de JavaScript:
var MyView = Backbone.View.extend (template: myTemplate, initialize: function () // No hay más enlaces aquí, render: function () // Lance el derecho HTML en este. $ el.html (este .template); // Use ModelBinder para enlazar el modelo y ver modelBinder.bind (this.model, this.el););
Ahora tenemos plantillas HTML limpias y solo necesitamos una línea de código para unir el HTML de la vista y los modelos usando modelBinder.bind. modelBinder.bind toma dos argumentos requeridos y un argumento opcional. El primer argumento es el modelo con los datos que se vincularán al DOM. El segundo es el nodo DOM que será atravesado recursivamente, buscando enlaces para hacer. El argumento final es un Unión Objeto que especifica reglas avanzadas sobre cómo deben realizarse los enlaces, si no le gusta el uso predeterminado.
ModelBinder puede ser usado en más que solo entrada etiquetas Funciona en cualquier elemento. Si el elemento es algún tipo de entrada de formulario, como entrada, seleccionar, o textarea, se actualizarán los valores de esos elementos, en consecuencia. Si se vincula a un elemento, como un div o lapso, colocará los datos del modelo entre las etiquetas de apertura y cierre de ese elemento (por ejemplo,. [Los datos van aquí]).
Hay mucho más poder detrás de Backbone.ModelBinder del que he demostrado aquí, así que asegúrate de leer la documentación en el repositorio de GitHub para aprender todo sobre esto..
Eso envuelve las cosas. Solo he cubierto un puñado de extensiones y complementos, pero estos son los que considero de mayor utilidad..
El paisaje de Backbone está cambiando constantemente. Si desea ver una lista completa de las diversas extensiones de Backbone disponibles, visite esta página wiki, que el equipo de Backbone actualiza regularmente..
