Primeros pasos con backbone.js

Configuración básica

Backbone requiere Underscore y (opcionalmente) jQuery - para la manipulación DOM (usando Backbone.View) y persistencia RESTful.

La forma más rápida de empezar a trabajar con Backbone es crear un archivo index.html con etiquetas de script simples en el <head> HTML:

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
    </head>
    <body>
    </body>
</html>

Backbone ya está disponible para su uso en la página.

Ejemplo de uso de Backbone (Principalmente Backbone.Model)

Backbone.js se compone de cuatro componentes separados: colecciones, modelos, enrutadores y vistas. Cada uno de estos tiene diferentes propósitos:

  • Modelo: representa un solo objeto de datos, pero agrega funcionalidades adicionales que no proporcionan los objetos nativos de JavaScript, como un sistema de eventos y una forma más conveniente de recuperar y enviar datos a un servidor remoto

  • Colección - representa un conjunto o “colección” de Modelos y proporciona funcionalidades para administrar sus modelos.

  • Ver - representa una sola parte de la interfaz de usuario; cada vista envuelve un elemento HTML DOM y proporciona una estructura para trabajar con ese elemento, así como funciones prácticas como el enlace de eventos simple.

  • Router: habilita una “aplicación de una sola página” al permitir que una aplicación active una lógica diferente (por ejemplo, mostrar diferentes páginas) en respuesta a los cambios de URL.

Crea tus propios sabores

Antes de ver cómo usar cada uno de estos componentes, primero echemos un vistazo rápido al sistema de clases de Backbone. Para crear una nueva subclase de una clase Backbone, simplemente llame al método extender de la clase original y pásele las propiedades de instancia y las propiedades de clase (estáticas) como objetos:

const MyModelClass = Backbone.Model.extend({
    instanceMethod: function() { console.log('Instance method!'); },
}, {
    staticMethod: function() { console.log('Static method!'); },
});

Al igual que con cualquier otro sistema de clases, los métodos de instancia se pueden llamar en instancias (objetos) de la clase, mientras que los métodos estáticos se llaman directamente en la clase misma (el constructor):

var myInstance = new MyModelClass();

// Call an instance method on our instance
myInstance.instanceMethod(); // logs "Instance method!"

// Call a static method on our class
MyModelClass.staticMethod(); // logs "Static method!"

Usando una clase

Ahora, veamos un ejemplo rápido de cómo puede usar cada clase. Comenzaremos con un Modelo de un libro.

const Book = Backbone.Model.extend({
    idAttribute: 'isbn',
    urlRoot: '/book'
});

Analicemos lo que acaba de suceder allí. Primero, creamos una subclase Book de Model, y le dimos dos propiedades de instancia.

  • idAttribute le dice a Backbone que use el atributo “isbn” del modelo como su ID al realizar operaciones AJAX.
  • urlRoot, le dice a Backbone que busque datos de libros en www.example.com/book.

Ahora vamos a crear una instancia de un libro y obtener sus datos del servidor:

var huckleberryFinn = new Book({ isbn: '0486403491' });
huckleberryFinn.fetch({
    // the Backbone way
    success: (model, response, options) => {
       console.log(model.get('name')); // logs "Huckleberry Finn"
    }
}).done(() => console.log('the jQuery promise way'));

Cuando creamos un nuevo ‘Libro’, le pasamos un objeto, y Backbone usa este objeto como los “atributos” iniciales (los datos) del ‘Modelo’. Como Backbone sabe que idAttribute es isbn, sabe que la URL de nuestro nuevo libro es /book/0486403491. Cuando le decimos que busque, Backbone usará jQuery para hacer una solicitud AJAX de los datos del libro. fetch devuelve una promesa (al igual que $.ajax), que puede usar para desencadenar acciones una vez que se haya completado la búsqueda.

Se puede acceder a los atributos o modificarlos usando los métodos get o set:

huckleberryFinn.get('numberOfPages'); // returns 64

huckleberryFinn.set('numberOfPages', 1); // changes numberOfPages to 1

Los Modelos también tienen un sistema de eventos que puedes usar para reaccionar cuando le suceden cosas a un Modelo. Por ejemplo, para registrar un mensaje cada vez que cambie numberOfPages, podría hacer lo siguiente:

huckleberryFinn.on('change:numberOfPages', () => console.log('Page change!'));

Para una introducción más detallada a las otras clases de Backbone, vea sus páginas de documentación individuales.

Ejemplo que muestra los conceptos básicos

El siguiente ejemplo es una introducción a:


<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
</head>
<body>

    <div id="example_container"></div>

    <script type="text/template" id="example_template">
        <label><%= example_label %></label>
        <input type="text" id="example_input" />
        <input type="button" id="example_button" value="Search" />
    </script>
    <script type="text/javascript">
        var ExampleView = Backbone.View.extend({
            // Compile the template using underscore
            template: _.template($("#example_template").html()),
            events: {
                "click #example_button": "onButtonClick"
            },

            initialize: function(options) {
                this.customOption = options.customOption;
            },

            render: function() {
                // Load the compiled HTML into the Backbone "el"
                this.$el.html(this.template({
                    example_label: "My Search"
                }));

                return this; // for chaining, a Backbone's standard for render
            },

            onButtonClick: function(event) {
                // Button clicked, you can access the button that 
                // was clicked with event.currentTarget
                console.log("Searching for " + $("#example_input").val());
            }
        });
        $(function() {
            //show the view inside the div with id 'example_container'
            var exampleView = new ExampleView({
                el: $("#example_container"),
                customOption: 41,
            });
            exampleView.render();
        });
    </script>
</body>
</html>

Hello Web (Configuración básica tipo “Hello World”)

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
        
        <script>
            $( function(){
                ( function(){
                    var View = Backbone.View.extend( {
                        "el": "body",
                        "template": _.template( "<p>Hello, Web!</p>" ),
    
                        "initialize": function(){
                            this.render();
                        },
                        "render": function(){
                            this.$el.html( this.template() );
                        }
                    } );
    
                    new View();
                })()
            } );
        </script>
    </head>
    <body>
    </body>
</html>