backbone.jsErste Schritte mit backbone.js

Bemerkungen

Backbone ist eine einfache, aber robuste clientseitige JavaScript-Bibliothek zum Erstellen von Anwendungen. Daten werden als Modelle dargestellt, die in Sammlungen gesammelt werden können. Der Modellstatus wird mit Ansichten angezeigt.

Backbone versucht, die minimale Menge an Datenstruktur- und Benutzeroberflächengrundelementen bereitzustellen, die in einer JavaScript-Webanwendung nützlich sind. Ziel ist es, diese Tools bereitzustellen, ohne zu bestimmen, wie sie verwendet werden sollen oder wie Ihr Anwendungsfall aussehen sollte. Dies bedeutet, dass der Entwickler viel Freiheit hat, die volle Erfahrung seiner Anwendung zu gestalten.

Grundeinstellung

Backbone erfordert Underscore und (optional) jQuery - für die DOM-Manipulation (mithilfe von Backbone.View) und RESTful-Persistenz.

Der schnellste Weg zum Einstieg in Backbone ist das Erstellen einer index.html Datei mit einfachen Skript-Tags im HTML-Bereich <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 ist jetzt für die Verwendung auf der Seite verfügbar.

Beispiel für die Verwendung von Backbone (hauptsächlich Backbone.Model)

Backbone.js besteht aus vier separaten Komponenten: Sammlungen, Modelle, Router und Ansichten. Jede davon dient verschiedenen Zwecken:

  • Model - stellt ein einzelnes Datenobjekt dar, fügt jedoch zusätzliche Funktionen hinzu, die nicht von nativen JavaScript-Objekten bereitgestellt werden, z. B. ein Ereignissystem und eine bequemere Möglichkeit, Daten abzurufen und an einen Remote-Server zu senden

  • Collection - repräsentiert eine Menge oder "Sammlung" von Modellen und stellt Funktionen zur Verwaltung der Modelle bereit.

  • View - stellt einen einzelnen Teil der Benutzeroberfläche dar; Jede Ansicht umschließt ein HTML-DOM-Element und bietet eine Struktur für die Arbeit mit diesem Element sowie praktische Funktionen wie die einfache Ereignisbindung.

  • Router - ermöglicht eine "Einzelseitenanwendung", indem eine Anwendung als Reaktion auf die Änderungen der URL eine andere Logik auslösen kann (z. B. verschiedene Seiten anzeigen).

Schaffen Sie Ihre eigenen Aromen

Bevor wir uns die Verwendung dieser Komponenten ansehen, werfen wir zunächst einen Blick auf das Klassensystem von Backbone. Um eine neue Unterklasse einer Backbone-Klasse zu erstellen, rufen Sie einfach die extend Methode der ursprünglichen Klasse auf und übergeben die Instanz- und (statischen) Klasseneigenschaften als Objekte:

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

Wie bei jedem anderen Klassensystem können Instanzmethoden für Instanzen (Objekte) der Klasse aufgerufen werden, während statische Methoden direkt für die Klasse selbst (den Konstruktor) aufgerufen werden:

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

Verwenden einer Klasse

Lassen Sie uns nun ein schnelles Beispiel für die Verwendung der einzelnen Klassen betrachten. Wir beginnen mit einem Model eines Buches.

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

Lassen Sie uns zusammenbrechen, was dort gerade passiert ist. Zuerst haben wir eine Book Unterklasse Model und ihr zwei Instanzeigenschaften gegeben.

  • idAttribute weist Backbone an, bei der Ausführung von AJAX-Operationen das Attribut "isbn" des Modells als ID zu verwenden.
  • urlRoot , weist Backbone an, auf www.example.com/book nach urlRoot zu suchen.

Lassen Sie uns nun eine Instanz eines Buches erstellen und die Daten vom Server abrufen:

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

Beim Erstellen eines neuen Book wir ein Objekt übergeben, und Backbone verwendet dieses Objekt als anfängliche "Attribute" (die Daten) des Model . Da Backbone weiß, dass idAttribute isbn , weiß es, dass die URL für unser neues Buch /book/0486403491 . Wenn wir ihn fetch , verwendet Backbone jQuery, um eine AJAX-Anforderung für die Daten des Buches zu erstellen. fetch gibt ein Versprechen zurück (genau wie $.ajax ), mit dem Sie Aktionen auslösen können, sobald der Abruf abgeschlossen ist.

Auf Attribute kann mit den get oder set Methoden zugegriffen oder geändert werden:

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

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

Models verfügen außerdem über ein Ereignissystem, mit dem Sie auf Ereignisse reagieren können, wenn ein Model passiert. Um beispielsweise eine Nachricht zu protokollieren, wenn sich numberOfPages ändert, können Sie numberOfPages tun:

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

Eine detailliertere Einführung in die anderen Backbone-Klassen finden Sie auf den einzelnen Dokumentationsseiten.

Beispiel mit den grundlegenden Konzepten

Das folgende Beispiel ist eine Einführung in:


<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 (Grundeinstellung "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>