backbone.jsAan de slag met backbone.js


Opmerkingen

Backbone is een eenvoudige maar robuuste client-side JavaScript-bibliotheek voor het bouwen van applicaties. Gegevens worden weergegeven als modellen, die kunnen worden verzameld in collecties. Modelstatus wordt weergegeven met Views .

Backbone probeert de minimale set van datastructuur en gebruikersinterface-primitieven te bieden die nuttig zouden kunnen zijn in een JavaScript-webtoepassing. Het doel is om deze tools te bieden zonder te dicteren hoe ze te gebruiken of hoe uw use-case eruit moet zien. Dit betekent dat de ontwikkelaar veel vrijheid krijgt om de volledige ervaring van zijn applicatie te ontwerpen.

Basic Setup

Backbone vereist Underscore en (optioneel) jQuery - voor DOM-manipulatie (met Backbone.View) en RESTful persistentie.

De snelste manier om met Backbone aan de slag te gaan, is door een index.html bestand te maken met eenvoudige scripttags in de 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 is nu beschikbaar voor gebruik op de pagina.

Voorbeeld van het gebruik van Backbone (voornamelijk Backbone.Model)

Backbone.js bestaat uit vier afzonderlijke componenten: collecties, modellen, routers en weergaven. Elk van deze heeft verschillende doeleinden:

  • Model - vertegenwoordigt een enkel gegevensobject, maar voegt extra functionaliteiten toe die niet worden geboden door native JavaScript-objecten, zoals een gebeurtenissysteem en een gemakkelijkere manier om gegevens op te halen en naar een externe server te verzenden

  • Collection - vertegenwoordigt een set of "verzameling" van modellen en biedt functionaliteiten om de modellen te beheren.

  • View - vertegenwoordigt een enkel deel van de gebruikersinterface; elke weergave bevat een HTML DOM-element en biedt structuur voor het werken met dat element, evenals handige functies zoals eenvoudige gebeurtenisbinding.

  • Router - maakt een "applicatie met één pagina" mogelijk door een applicatie verschillende logica te laten activeren (bijv. Verschillende pagina's tonen) in reactie op de URL-wijzigingen.

Maak je eigen smaken

Voordat we kijken hoe we elk van deze componenten kunnen gebruiken, gaan we eerst even kijken naar het klassensysteem van Backbone. Om een nieuwe subklasse van een Backbone-klasse te maken, roept u eenvoudig de extend van de oorspronkelijke klasse aan en geeft u deze de eigenschappen van de instantie en de eigenschappen van de (statische) klasse door als objecten:

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

Net als bij elk ander klassensysteem, kunnen instantiemethoden worden aangeroepen op instanties (objecten) van de klasse, terwijl statische methoden rechtstreeks op de klasse zelf (de constructor) worden aangeroepen:

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

Een klas gebruiken

Laten we nu eens kijken naar een snel voorbeeld van hoe u elke klasse kunt gebruiken. We beginnen met een Model van een boek.

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

Laten we afbreken wat er daar net is gebeurd. Eerst hebben we een Book subklasse van Model en deze twee instantie-eigenschappen gegeven.

  • idAttribute vertelt Backbone het "isbn" -kenmerk van het model te gebruiken als ID bij het uitvoeren van AJAX-bewerkingen.
  • urlRoot , vertelt Backbone om urlRoot te zoeken op www.example.com/book .

Laten we nu een exemplaar van een boek maken en de gegevens van de server ophalen:

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

Toen we een nieuw Book maakten, gaven we het een object en Backbone gebruikt dit object als de initiële "attributen" (de gegevens) van het Model . Omdat Backbone weet dat het idAttribute isbn , weet het dat de URL voor ons nieuwe boek /book/0486403491 . Wanneer we het laten fetch , gebruikt Backbone jQuery om een AJAX-aanvraag voor de gegevens van het boek in te dienen. fetch retourneert een belofte (net als $.ajax ), die je kunt gebruiken om acties te activeren zodra het ophalen is voltooid.

Attributen kunnen worden geopend of gewijzigd met behulp van de methoden get of set :

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

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

Models ook een gebeurtenissysteem waarmee u kunt reageren wanneer dingen met een Model gebeuren. Om bijvoorbeeld een bericht te loggen wanneer het numberOfPages verandert, kunt u het volgende doen:

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

Bekijk hun individuele documentatiepagina's voor een meer gedetailleerde inleiding tot de andere Backbone-klassen.

Voorbeeld van de basisconcepten

Het volgende voorbeeld is een inleiding tot:


<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 (basisinstelling "Hello World" -type)

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