Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. BackboneJS

Vistas de Backbone y el DOM

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Andrea J (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Resumen

Las vistas de Backbone proporcionan una convención útil y la abstracción de las interfaces de usuario.  Sin embargo, si queremos incluir funcionalidades que Backbone no soporta nativamente, tendremos que integrar nuestro propio código o librerías externas en nuestra aplicación Backbone. Y tendremos que tener cuidado para evitar conflictos entre Backbone y las librerías externa que incluyamos en nuestro applicación.

Introducción a Backbone

Backbone es una forma fantástica de organizar tu código del lado cliente. Con abstracciones como modelos, vistas y colecciones, Backbone le ayuda a los desarrolladores serios a escribir aplicaciones bien organizadas y escalables.

Aunque hay muchas alternativas a Backbone, incluidas Angular y Ember, Backbone le brinda a los desarrolladores una libertad increíble para escribir y organizar su código de manera natural y cómoda sin ser demasiado obstinados sobre cómo se ve el Modelo de objetos de documento (DOM).

Skinny en las vistas de Backbone

Las vistas son uno de los componentes más poderosos y flexibles de Backbone. Según los autores de Backbone:

Las vistas de Backbone son casi más convencionales que el código: no determinan nada acerca de tu HTML o CSS y pueden usarse con cualquier biblioteca de plantillas de JavaScript.

Se utilizan para manipular lo que los usuarios ven en su navegador, y facilitan la comunicación con los modelos. Como resultado, en el paradigma de Model-View-Controller, es útil pensar en las vistas de Backbone como vista y controlador.

Esto tiene graves implicaciones al desarrollar aplicaciones con una interacción significativa del usuario. De hecho, hay muchas situaciones en las que es posible que quieras utilizar alguna otra biblioteca para manipular el DOM. La visualización de datos y los juegos basados en plataformas web son dos ejemplos en los que es posible que prefieras que otra biblioteca controle algunas de las representaciones de vista orientadas al usuario. Como resultado, puedes considerar usar jQuery, d3.js, crossfilter o three.js para algunas de tus necesidades de manipulación de DOM.

Afortunadamente, hay maneras de hacer que Backbone funcione bien con estos otros manipuladores DOM.

Manipulación del modelo de objetos de documento en Backbone

 Antes de profundizar en esto, repasemos la manipulación DOM en Backbone. Comencemos con un objeto de vista básico.

Excelente. Ahora, vamos a decirle a la vista cómo renderizarse definiendo un método .render() .

Aquí están sucediendo varias cosas, así que vayamos paso a paso.

Definición de un método .render() .

En primer lugar, definimos un método .render() que encapsule la lógica necesaria para renderizar HTML. Ten en cuenta que Backbone viene con un método .render()  listo para usar. Sin embargo, no hace nada. ¡Fue diseñado para sobrescribirse con lógica personalizada!

Obtener contenido HTML

El ejemplo anterior asume que obtienes HTML en alguna parte. Puedes utilizar guiones bajos _.template(). Alternativamente, podemos usar otras bibliotecas de plantillas, como Handlebars (mi preferida). Lo único que importa es que, de alguna manera, obtenemos algo de contenido HTML.

¿Qué diablos es el?

Necesitamos un lugar para colocar el contenido HTML; para eso es el. Como .render(), el es un atributo que viene con las vistas de Backbone listas para usar. Hace referencia al elemento HTML (y a todos sus elementos secundarios) contenidos en esta vista. En el ejemplo anterior, no especificamos el. De forma predeterminada, el es un div. Sin embargo, podríamos haber configurado fácilmente el elemento padre así:

También está $el, que es simplemente el envuelto en jQuery. Más adelante veremos que $el juega un papel importante en el dominio de las vistas de Backbone.

Devolviendo this...

Finalmente, devolvemos una referencia al objeto en sí para permitir el encadenamiento. Si bien no es estrictamente obligatorio, devolver this es una convención. Sin return this, necesitaríamos alguna forma de acceder al contenido HTML del elemento. El siguiente código muestra una solución alternativa.

¡Ay, no hay nada en la pantalla!

Buen punto. Aunque llamamos a .render(), no hay nada en la pantalla, ¿qué pasa?

Eso se debe a que todavía no hemos interactuado con el DOM. Todo lo que hicimos fue generar algo de HTML y representarlo en un objeto JavaScript llamado aView. Dado que ahora tenemos acceso al HTML generado, todo lo que tenemos que hacer es agregar o insertar el HTML en el DOM de tu aplicación web.

Para avanzar, también configuraremos una mini-aplicación para que cuando se cargue la página, aparezca la vista. A continuación se muestra cómo debe ser tu HTML y JavaScript.

Configuración básica de HTML

Esto es lo que está sucediendo en App.js

Ve a tu servidor/navegador local, carga la página ¡y tu aplicación debería estar ejecutándose!

Usando Backbone y jQuery simultáneamente

La flexibilidad de Backbone permite que el uso de bibliotecas de terceros manipule el DOM. Un escenario es cuando quieres usar jQuery y Backbone simultáneamente para manipular las vistas. A continuación se muestra un ejemplo actualizado.

El código anterior dará como resultado dos párrafos en la página. El primer párrafo contiene "Algo de HTML". El segundo párrafo contiene "Otro HTML".

Para poner a prueba tu conocimiento sobre esto, invierte las llamadas al método de la siguiente manera:

El código anterior dará como resultado un párrafo: "Algo de HTML". En ambos casos, también hay un elemento <p> sin nada en él. Discutiremos esto en un momento.

Manipular el DOM en las vistas de Backbone de manera eficiente

Comprender la magia de la manipulación (y transversal) eficiente del DOM requiere comprender this.$el y this.$(). Al usar this.$el, estamos ajustando la manipulación del DOM al contenido de la vista. Al usar this.$(), estamos examinando el recorrido de DOM al árbol DOM dentro de la vista.

Como resultado, en el contexto de Backbone, algunos usos de $() (en lugar de this.$()) podrían ser ineficientes. Por ejemplo, supongamos que queríamos cruzar el DOM para encontrar algún elemento. Podríamos usar cualquiera de los métodos comunes de recorrido DOM, incluido .find(), .children(), .closest(), .first(), y así sucesivamente.

Si sabemos, a priori, que el elemento que buscamos se encuentra en algún lugar dentro del DOM de la vista, entonces debemos usar this.$() para evitar buscar un árbol DOM más grande innecesariamente. Si el elemento que buscamos está fuera del DOM de la vista, entonces tendremos que usar $().

Por ejemplo, el método .specialRender() utiliza el recorrido DOM localizado para garantizar que buscamos elementos con la clase empty dentro del contexto de la vista. Si se encuentra, establece el contenido HTML de esos elementos para agregar un span y el texto "Ya no está vacío".

Conclusión

En este artículo revisamos las vistas de Backbone, discutimos cómo renderizar las vistas de Backbone en el DOM y exploramos cómo hacer que Backbone funcione bien con otras bibliotecas que quizás quieras utilizar para manipular el DOM. También aprendimos sobre el recorrido DOM localizado y los métodos identificados para cruzar el DOM de manera eficiente e ineficiente.

En la siguiente parte de este artículo profundizaremos en ejemplos más complicados de cómo hacer que varias bibliotecas trabajen juntas en la manipulación del DOM.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.