Looking for backbone.js Answers? Try Ask4KnowledgeBase
Looking for backbone.js Keywords? Try Ask4Keywords

backbone.jsEmpezando con backbone.js


Observaciones

Backbone es una biblioteca de JavaScript del lado del cliente simple pero robusta para crear aplicaciones. Los datos se representan como modelos, que se pueden recopilar en colecciones. El estado del modelo se muestra con vistas .

Backbone intenta proporcionar el conjunto mínimo de estructuras de datos y primitivas de interfaz de usuario que serían útiles en una aplicación web de JavaScript. Su objetivo es proporcionar estas herramientas sin dictar cómo usarlas o cómo debería ser su caso de uso. Esto significa que al desarrollador se le da mucha libertad para diseñar la experiencia completa de su aplicación.

Configuración básica

Backbone requiere un guión bajo (y, opcionalmente) jQuery - para la manipulación de DOM (usando Backbone.View) y la persistencia RESTful.

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

<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 sirve para diferentes propósitos:

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

  • Collection : representa un conjunto o "colección" de Modelos y proporciona funcionalidades para administrar sus modelos.

  • View : representa una parte única de la interfaz de usuario; cada Vista envuelve un elemento HTML DOM, y proporciona una estructura para trabajar con ese elemento, así como características de conveniencia como el enlace simple de eventos.

  • Router : permite una "aplicación de una sola página" al permitir que una aplicación active una lógica diferente (p. Ej., Mostrar páginas diferentes) en respuesta a los cambios de la 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 extend de la clase original y pásele las propiedades de instancia y las propiedades de la 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 propia clase (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 puedes usar cada clase. Comenzaremos con un Model de un libro.

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

Vamos a desglosar lo que acaba de pasar allí. Primero, creamos una subclase de Book del 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 Book le pasamos un objeto y Backbone usa este objeto como los "atributos" iniciales (los datos) del Model . Debido a que Backbone sabe que el idAttribute es isbn , sabe que la URL de nuestro nuevo Libro es /book/0486403491 . Cuando le decimos que lo fetch , Backbone usará jQuery para realizar una solicitud AJAX para los datos del libro. fetch devuelve una promesa (como $.ajax ), que puede usar para desencadenar acciones una vez que se haya completado la búsqueda.

Se puede acceder o modificar los atributos utilizando los métodos get o set :

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

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

Models también tienen un sistema de eventos que puede utilizar para reaccionar cuando le ocurren cosas a un Model . Por ejemplo, para registrar un mensaje cada vez que cambie el número de numberOfPages , puede hacer:

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

Para una introducción más detallada de 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 de 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>