Vistas de Backbone y el DOM

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Resumen

Las vistas de Backbone proporcionan una convención útil y la abstracción de las interfaces de usuario. Sin embargo, si queremos incluir funcionalidades que Backbone no soporta nativamente, tendremos que integrar nuestro propio código o librerías externas en nuestra aplicación Backbone. Y tendremos que tener cuidado para evitar conflictos entre Backbone y las librerías externa que incluyamos en nuestro applicación.

Introducción a Backbone

Backbone es una forma fantástica de organizar tu có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 increíble para escribir y organizar su código de manera natural y cómoda sin ser demasiado obstinados sobre cómo se ve el Modelo de objetos de documento (DOM).

Skinny en las vistas de Backbone

Las vistas son uno de los componentes más poderosos y flexibles de Backbone. Según los autores de Backbone:

Las vistas de Backbone son casi más convencionales que el có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 comunicación con los modelos. Como resultado, en el paradigma de Model-View-Controller, es útil pensar en las vistas de Backbone como vista y controlador.

Esto tiene graves implicaciones al desarrollar aplicaciones con una interacció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 visualizació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 manipulación de DOM.

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

Manipulación del modelo de objetos de documento en Backbone

Antes de profundizar en esto, repasemos la manipulación DOM en Backbone. Comencemos con un objeto de vista básico.

var SomeView = Backbone.View.extend({ 
    // Some definition stuff here 
}); 

var aView = new SomeView();

Excelente. Ahora, vamos a decirle a la vista cómo renderizarse definiendo un método .render() .

var SomeView = Backbone.View.extend({ 
    // define how to render something 
    render: function() { 
        // get some HTML 
        var htmlContent = "<p>This some HTML that will be inserted into the DOM</p>"; 
        
        // insert the html
        this.$el.html(htmlContent); 
        
        // return an instance of the object for chaining
        return this; 
    } 
});

Aquí están sucediendo varias cosas, así que vayamos paso a paso.

Definición de un método `.render()` .

En primer lugar, definimos un método .render() que encapsule la lógica necesaria para renderizar HTML. Ten en cuenta que Backbone viene con un método .render() listo para usar. Sin embargo, no hace nada. ¡Fue diseñado para sobrescribirse con ló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 único que importa es que, de alguna manera, obtenemos algo de contenido HTML.

¿Qué 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, podríamos haber configurado fácilmente el elemento padre así:

var SomeView = Backbone.View.extend({ 
    el: "article", ... 
}); 

var aView = new SomeView();

console.log(aView.el); // an empty "article" HTML element

También está $el, que es simplemente el envuelto en jQuery. Má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 sí para permitir el encadenamiento. Si bien no es estrictamente obligatorio, devolver this es una convención. Sin return this, necesitaríamos alguna forma de acceder al contenido HTML del elemento. El siguiente código muestra una solución alternativa.

/** 
 * If render() returns nothing, we are really 
 * accessing the `el` property of undefined, which does not 
 * exist!
 */
aView.render().el; // Should throw an error 
 
// Try accessing the HTML 
console.log(aView.el); // Should be empty (but defined!) 

// add HTML to the DOM of 'aView' 
aView.render(); 

// Try accessing the HTML again 
console.log(aView.el) // Should contain the HTML

¡Ay, no hay nada en la pantalla!

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

Eso se debe a que todaví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 aplicación web.

Para avanzar, también configuraremos una mini-aplicación para que cuando se cargue la página, aparezca la vista. A continuación se muestra cómo debe ser tu HTML y JavaScript.

Configuración básica de HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>My Awesome Backbone App</title> 
        <!-- Include your CSS Here -->
        <link rel="stylesheet" type="text/css" href="/css/styles.css" />
        
        <!-- Include JS dependencies --> 
        <!-- Backbone depends on underscore and, in this example, 
             depends on jQuery. Please note the order of the 
             dependencies --> 
        <script src="/js/lib/jquery.js"></script>
        <script src="/js/lib/underscore.js"></script>
        <script src="/js/lib/backbone.js"></script>    
    </head>
    <body>
        <div class="app"></div> 
        <!-- Include your custom Backbone code in the below script -->
        <script src="/js/app.js"></script>            
    </body>
</html>

Esto es lo que está sucediendo en App.js

// Create a view 
var SomeView = Backbone.View.extend({ 
    initialize: function() {}, 
    render: function() { 
        var someHTML = "<p>This is some HTML</p>"; 
        this.$el.html(someHTML); 
        return this; 
    } 
}); 

// Create a router
var Router = Backbone.Router.extend({ 
    // define your routes 
    routes: { "": "home" }, 
    home: function() { 
        var aView = new SomeView(); 
        $('.app').html(aView.render().el); 
    } 
}); 

// Instantiate your router 
new Router(); 

// Start tracking history 
Backbone.history.start();

Ve a tu servidor/navegador local, carga la página ¡y tu aplicación debería estar ejecutándose!

Usando Backbone y jQuery simultá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 simultáneamente para manipular las vistas. A continuación se muestra un ejemplo actualizado.

var SomeView = Backbone.View.extend({ 
    
    // Manipulate DOM indirectly by creating HTML content in a 
    // Backbone View 
    render: function() { 
        var someHTML = "<p>Some HTML</p><p class='empty'><p>"; 
        this.$el.html(someHTML); 
        return this;
    }, 
    
    // Manipulate DOM directly from within the Backbone View
    renderWithJQuery: function() { 
        var otherHTML = "<p>Other HTML</p>"; 
        $('.app').append(otherHTML); 
        
        // may not make sense to return 'this' 
    }, 
    
    // another render method, to keep things interesting 
    specialRender: function() { 
        this.$('.empty').append("<span>No longer empty!</span>"); 
        return this; 
    } 
}); 

// Later in your app... 

// create the view 
var aView = new SomeView(); 

// change the DOM to reflect the newly created view 
$('.app').html(aView.render().el); 

// append more content directly to the DOM using jQuery within 
// a Backbone view object 
aView.renderWithJQuery();

El código anterior dará como resultado dos párrafos en la página. El primer párrafo contiene "Algo de HTML". El segundo párrafo contiene "Otro HTML".

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

// SomeView is already defined 

var aView = new SomeView(); 

aView.renderWithJQuery(); 

$('.app').html(aView.render().el);

El código anterior dará como resultado un párrafo: "Algo de HTML". En ambos casos, también hay un elemento <p> sin nada en él. Discutiremos esto en un momento.

Manipular el DOM en las vistas de Backbone de manera eficiente

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

Como resultado, en el contexto de Backbone, algunos usos de $() (en lugar de this.$()) podrían ser ineficientes. Por ejemplo, supongamos que queríamos cruzar el DOM para encontrar algún elemento. Podríamos usar cualquiera de los métodos comunes de recorrido DOM, incluido .find(), .children(), .closest(), .first(), y así sucesivamente.

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

Por ejemplo, el mé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 está vacío".

Conclusión

En este artículo revisamos las vistas de Backbone, discutimos cómo renderizar las vistas de Backbone en el DOM y exploramos cómo hacer que Backbone funcione bien con otras bibliotecas que quizás quieras utilizar para manipular el DOM. También aprendimos sobre el recorrido DOM localizado y los métodos identificados para cruzar el DOM de manera eficiente e ineficiente.

En la siguiente parte de este artículo profundizaremos en ejemplos más complicados de cómo hacer que varias bibliotecas trabajen juntas en la manipulación del DOM.