Premiers pas avec backbone.js

Configuration de base

Backbone nécessite [Underscore][_] et (éventuellement) [jQuery][jquery] - pour la manipulation DOM (à l’aide de Backbone.View) et la persistance RESTful.

Le moyen le plus rapide d’être opérationnel avec Backbone est de créer un fichier index.html avec des balises de script simples dans le 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 est maintenant disponible pour une utilisation dans la page.

[_] : http://underscorejs.org/ [jquery] : http://jquery.com/

Exemple d’utilisation de Backbone (principalement Backbone.Model)

Backbone.js est composé de quatre composants distincts : collections, modèles, routeurs et vues. Chacun d’entre eux a des objectifs différents :

Model - représente un seul objet de données, mais ajoute des fonctionnalités supplémentaires non fournies par les objets JavaScript natifs, comme un système d’événements et un moyen plus pratique de récupérer et d’envoyer des données à un serveur distant
Collection - représente un ensemble ou une “collection” de modèles et fournit des fonctionnalités pour gérer ses modèles.
View - représente une seule partie de l’interface utilisateur ; chaque vue encapsule un élément HTML DOM et fournit une structure pour travailler avec cet élément ainsi que des fonctionnalités pratiques telles que la liaison d’événement simple.
Router - active une “application à page unique” en permettant à une application de déclencher une logique différente (par exemple, afficher différentes pages) en réponse aux modifications d’URL.

Créez vos propres saveurs

Avant de voir comment utiliser chacun de ces composants, examinons d’abord rapidement le système de classes de Backbone. Pour créer une nouvelle sous-classe d’une classe Backbone, vous appelez simplement la méthode extend de la classe d’origine et lui transmettez les propriétés d’instance et les propriétés de classe (statiques) en tant qu’objets :

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

Comme avec tout autre système de classes, les méthodes d’instance peuvent être appelées sur des instances (objets) de la classe, tandis que les méthodes statiques sont appelées directement sur la classe elle-même (le constructeur) :

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!"

Utiliser une classe

Maintenant, regardons un exemple rapide de la façon dont vous pouvez utiliser chaque classe. Nous allons commencer avec un Modèle d’un livre.

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

Décomposons ce qui vient de se passer là-bas. Tout d’abord, nous avons créé une sous-classe Book de Model, et nous lui avons donné deux propriétés d’instance.

idAttribute indique à Backbone d’utiliser l’attribut “isbn” du modèle comme ID lors de l’exécution d’opérations AJAX.
urlRoot, indique à Backbone de rechercher les données du livre sur www.example.com/book.

Créons maintenant une instance d’un livre et récupérons ses données depuis le serveur :

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'));

Lorsque nous avons créé un nouveau Book, nous lui avons transmis un objet, et Backbone utilise cet objet comme “attributs” initiaux (les données) du Model. Parce que Backbone sait que idAttribute est isbn, il sait que l’URL de notre nouveau livre est /book/0486403491. Lorsque nous lui disons de “récupérer”, Backbone utilisera jQuery pour effectuer une requête AJAX pour les données du livre. fetch renvoie une promesse (tout comme $.ajax), que vous pouvez utiliser pour déclencher des actions une fois la récupération terminée.

Les attributs peuvent être consultés ou modifiés en utilisant les méthodes get ou set :

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

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

Les modèles ont également un système d’événements que vous pouvez utiliser pour réagir lorsque quelque chose arrive à un modèle. Par exemple, pour consigner un message chaque fois que le numberOfPages change, vous pouvez faire :

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

Pour une introduction plus détaillée aux autres classes Backbone, consultez leurs pages de documentation individuelles.

Exemple présentant les concepts de base

L’exemple suivant est une introduction à :

[Compilation de modèles utilisant un trait de soulignement][1]
Accéder aux variables dans un modèle
Création d’une vue
Rendu d’une vue
Affichage d’une vue

<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>

[1] : http://underscorejs.org/#template

Hello Web (configuration de base de type “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>

Premiers pas avec backbone.js

Configuration de base #

Exemple d’utilisation de Backbone (principalement Backbone.Model) #

Créez vos propres saveurs #

Utiliser une classe #

Exemple présentant les concepts de base #

Hello Web (configuration de base de type “Hello World”) #