Modell
In Bezug auf das Rückgrat ist das Modell das Modell. Dieses Ding ist wie das Datenbank-Mapping-Modell in der Back-End-Entwicklung. Es ist auch ein Modell von Datenobjekten und sollte die gleichen Attribute wie das Modell im Back-End haben (nur Attribute, die über das Front-End betrieben werden müssen).
Schauen wir uns einen Blick auf das Backbone -Modell aus dem Beispiel für Schritt.
Definieren Sie zuerst eine HTML -Seite:
<! DocType html> <html> <kopf> <titels> the5fire-backbone-model </title> </head> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.js. src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (Funktion ($) {/***hier einsetzen **/}) (jquery); </script> </html>Der folgende Code muss in der Funktion im Skript -Tag dieser HTML ausgefüllt werden.
1. Das einfachste Objekt
MAN = Backbone.model.extend ({initialize: function () {alert ('Hey, du erstellst mich!');}}); Var man = neuer Mann;Das ist sehr einfach. Es gibt auch eine Modellpräsentation in HelloWorld, ohne Attribute zu definieren. Dies ist eine Methode während der Initialisierung oder ein Konstruktor.
2. Zwei Methoden zur Objektzuweisung
Der erste besteht darin, direkt zu definieren und den Standardwert festzulegen.
MAN = Backbone.model.extend ({initialize: function () {alert ('Hey, du erstellst mich!');}, Standards: {Name: 'Zhang san', Alter: '38'}}); var man = new man; alert (Man.get ('Name');Der zweite Typ wird bei der Zuordnung definiert
MAN = Backbone.model.extend ({initialize: function () {alert ('Hey, du erstellst mich!');}}); Man.set ({name: 'the5fire', ay: '10 '}); Alert (Man.get (' Name ');Bei Verwendung von GET -Werten wird GET verwendet.
3.. Methoden im Objekt
MAN = Backbone.model.extend ({initialize: function () {alert ('Hey, du erstellst mich!'); Mann; alarm (Mann.aboutme ());4. Hören Sie sich die Änderungen der Attribute im Objekt an
Man = Backbone.model.extend ({initialize: function () {alert ('Hey, du erstellst mich!'); // Binden Sie während der Initialisierung diese. }, Aboutme: function () {return 'Mein Name ist' + this.get ('name') + ', dieses Jahr' + this.get ('Alter') + 'Jahr'; var Man = New Man; Man.set ({Name: 'the5fire'}) // Trigger das gebundene Änderungsereignis, Alarm.5. Hinzufügen von Überprüfungsregeln zu den Objekt- und Fehleraufforderungen hinzufügen
MAN = Backbone.model.extend ({initialize: function () {alert ('Hey, du erstellst mich!'); // Binden Sie während der Initialisierung diese. }); }}); var Man = new Man; Man.set ({name: ''}); // Gemäß den Überprüfungsregeln wird eine Fehlermeldung angezeigt.6. Die Erfassung und Speicherung von Objekten erfordern die testende serverseitige Unterstützung.
Zunächst müssen Sie ein URL -Attribut für das Objekt definieren. Beim Aufrufen der Speichernmethode werden alle Attribute des Objekts auf den Server veröffentlicht.
MAN = Backbone.model.extend ({url: '/save/', initialize: function () {alert ('Hey, du erstellst mich!'); // Binden Sie das Hören während der Initialisierung this.bind ("ändern: name", function () {var name = this.get ("name"); alert ("arm (" arm ("arm (" arm ("acher teal (" modell {}) {}); ALERT (Fehler);}); 'Jahr alt'; // Der Beitrag wird an die URL gesendet, die dem Modell entspricht, und das Datenformat ist JSON {"Name": "The5fire", "Alter": 38} // Dann holen Sie die Daten mithilfe der Methode mit Methodenabruf ([Optionen]). Var Man1 = New Man; // Erst Fall, wenn das Feetch -Methode entspricht. Holen Sie sich oder veröffentlichen Sie auf der Serverseite. Man1.Fetch (); // Fügen Sie im zweiten Fall Parameter zum Abrufen hinzu, wie folgt: Man1.fetch ({url: '/getmans/'}); // Auf diese Weise wird eine GET -Anfrage an die URL/Getmans/gesendet. // Der vom Server zurückgegebene Ergebnisstil sollte die entsprechenden JSON -Formatdaten sein, die das gleiche Format des Posts beim Speichern haben. // Die vom Server zurückgegebene Methode zum Annehmen der Daten ist jedoch wie folgt: Man1.fetch ({url: '/getmans/', Erfolg: Funktion (Modell, Antwort) {alert ('Erfolg'); // Modell ist das abgerufene Datenalarm (Modell.get ('Name'); alert ('error');Hinweis: Die obigen Codes sind nur Codes, die normal ausgeführt werden können, es werden jedoch später Instanzen über die Serverseite geben.
Hier sollte hinzugefügt werden, dass der asynchrone Betrieb des Servers über die Methode Backbone.Sync abgeschlossen wird. Wenn diese Methode aufgerufen wird, wird automatisch ein Parameter übergeben und die entsprechende Anforderung entsprechend den Parametern an den Server gesendet. Wenn Sie beispielsweise speichern und das Backbone festlegen, bestimmen Sie, ob Ihr Objekt neu ist. Wenn es neu erstellt ist, wird der Parameter erstellt. Wenn es sich um ein vorhandenes Objekt handelt, wurde es nur geändert, dann ist der Parameter aktualisiert. Wenn Sie die Fetch -Methode aufrufen, wird der Parameter gelesen. Wenn es zielgerichtet ist, wird der Parameter gelöscht. Das heißt, das sogenannte CRUD ("Create", "Read", "Update" oder "Löschen"), und die Anforderungstypen, die diesen vier Parametern entsprechen, sind nach Post, Get, Put und Löschen. Sie können entsprechende CRUD -Operationen auf dem Server basierend auf diesem Anforderungstyp durchführen.
Notiz:
In Bezug auf URL und URLROOT sendet Ihr CRUD, wenn Sie URL festlegen, die entsprechende Anfrage an diese URL. Ein weiteres Problem ist jedoch, dass die Löschanforderung gesendet wird, es jedoch keine Daten gesendet werden. Dann wissen Sie nicht, welches Objekt (Aufzeichnung) auf der Serverseite gelöscht werden soll. Hier ist also ein weiteres Konzept der Urlroot. Nachdem Sie Urlroot festgelegt haben, ist die URL -Adresse der Anforderung, wenn Sie Put -Put -Anfragen senden und löschen.
Sammlung
Die Sammlung ist eine geordnete Sammlung von Modellobjekten. Es ist sehr einfach, das Konzept zu verstehen. Wenn Sie es sich einige Beispiele ansehen, werden Sie es einfacher finden.
1. Beispiele über Bücher und Bücherregal
Book = backbone.model.extend ({Standards: {// dank der Internetnutzer für die Änderung der Blue Power Correction in DefaultStitle: 'Standard'}, initialize: function () {// alert ('Hey, du erstellst mich!'); 'book1'}); var book2 = neues book ({title: 'book2'}); var book3 = neues book ({title: 'book3'}); // var bookself = new Bookself ([Buch 1, Buch 2, Buch 3]); // Beachten Sie, dass es sich um ein Array handelt, oder verwenden Sie addvar bookself = new Booksel bookshelf.each (function (book) {alert (book.get ('title');});Sehr einfach, keine Erklärung
2. Verwenden Sie Fetch, um Daten von der Serverseite abzurufen
Zunächst müssen Sie die URL im Buchhandel oben definieren. Beachten Sie, dass die Urlroot -Eigenschaft in der Sammlung nicht vorhanden ist. Oder Sie definieren den Wert der URL in der Fetch -Methode wie folgt direkt:
bookShelf.fetch ({url: '/getBooks/', Erfolg: Funktion (Sammlung, Antwort) {collection.each (function (book) {alert (book.get ('title');});}, error: function () {alert ('fehler');}});Es gibt auch zwei Methoden, die Rückgabewerte akzeptieren. Ich denke, es ist leicht, die spezifische Bedeutung zu verstehen. Wenn Sie Daten im richtigen Format zurückgeben, rufen Sie die Erfolgsmethode auf und die Fehlermethode wird aufgerufen. Natürlich hängt die Fehlermethode auch vom Hinzufügen der gleichen formalen Parameter wie die Erfolgsmethode ab.
Das entsprechende Buchhandel gibt das Format zurück wie folgt: [{'title': 'book1'}, {'title': 'book2'} .....]
3.. Methode zurücksetzen
Wenn diese Methode verwendet wird, muss sie mit dem oben genannten Abruf koordiniert werden. Nachdem die Sammlung die Daten abgerufen hat, wird die Reset -Methode aufgerufen, sodass Sie die Reset -Methode definieren oder die Reset -Methode in der Sammlung binden müssen. Hier ist eine Demonstration der Verwendung von Bindungen:
bookshelf.bind ('reset', showAllBooks); showAllBooks = function () {bookself.each (Funktion (Buch) {// Rendern Sie die Buchdaten auf die Seite.});};};Die Bindungsschritte müssen vor dem Abrufen durchgeführt werden.
Der vollständige Code zur Sammlung ist unten angegeben, für die der serverseitige Unterstützung erforderlich ist. Die serverseitige Konstruktion wird später geschrieben.
<!DOCTYPE html><html><head> <title>the5fire-backbone-collection</title></head><body></body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <Script> (Funktion ($) {// Sammlung ist eine geordnete Sammlung von einfachen Modellen // 1. Ein einfaches Beispiel book = backbone Korrektur zu Standards: 'Standard'}, initialisieren: function () {// alert ('Hey, du erstellst mich!'); 'book'}) // var booksel i <bookself.models.length; Render bookself.bind ('reset', ShowAllBooks); bookself.each (function (book) {// die Buchdaten auf die Seite rendern.})