Umweltvorbereitung
Bevor Sie das Backbone offiziell studieren, müssen Sie etwas vorbereiten:
Zunächst müssen Sie die Backbone Framework -Quelldatei erhalten: http://documentcloud.github.com/backbone/
Backbone stützt sich auf die grundlegende Methode des Unterstrich -Frameworks. Sie müssen daher auch die Quelldatei des Undercore -Frameworks herunterladen: http://documentcloud.github.com/underscore/
In Backbone müssen Operationen zu DOM und Ereignissen auf Bibliotheken von Drittanbietern (wie JQuery oder Zepto) beruhen, nur einen von ihnen zum Herunterladen auswählen:
JQuery: http://jquery.com/
Zepto: http://zeptojs.com/
Es scheint, als wäre es umständlich, aber der Zweck des Rückgrats besteht darin, einfache Frameworks zum Erstellen komplexer Anwendungen zu verwenden. Probleme bedeutet also nicht, dass es kompliziert ist.
Sie können eine neue HTML -Seite erstellen und diese Frameworks wie folgt einbringen:
<script type = "text/javaScript" src = "jQuery/jQuery-1.8.2.min
Zu diesem Zeitpunkt sind Sie bereit für die Umgebung, die Sie Rückgrat ausführen müssen.
Hallo Welt
Lassen Sie uns zunächst über die Funktionen dieser HelloWorld sprechen: Auf der Seite befindet sich eine Berichtstaste, klicken Sie auf das Popup-Eingabefeld, geben Sie Inhalte ein, bestätigen Sie und der Inhalt wird der Seite hinzugefügt. Das Seitenbild lautet wie folgt:
Lassen Sie uns den folgenden Code sehen:
<! DocType html> <html> <Head> <titels> the5fire.com-backbone.js-hello World </title> </head> <body> <button id = "check"> report </button> <ul id = "worldlist"> </ul> <a href = "http://wwww.the5fire.com"> more tutorials <http://ww.the5fire.com " src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script src = "http://documentcloud.github.com/underscore/underscore-min.js src = "http://documentcloud.github.com/backbone/backbone-min.js"> </script> <script> (Funktion ($) {World = Backbone.model.extend ({// ein Weltobjekt mit Namenszusammenstellungsname erstellen: {assozidiert). this.bind ("add", options.view.addoneWorld); #Check ":" Checkin ", // Ereignisbindung, Binden Sie das Element mit ID -Check in DOM}, checkin: function () {var World_name = prompt (" Darf ich fragen, welchen Stern sind Sie? "); if (World_name ==" ") World_Name = 'Unbekannt'; {$ ("#World-List"). append ("<li> Hier ist eine Begrüßung von <b>" + modell.get ('Name') + "</b> Planet: Hallo Welt! </li>");Ich denke, der Code ist intuitiv. Es umfasst die drei Teile von Rückgrat, Ansicht, Modell und Sammlung und wird später erwähnt. Solange Sie es hier verstehen, repräsentiert das Modell ein Datenmodell, die Sammlung ist eine Sammlung von Modellen und die Ansicht wird verwendet, um Seiten und einfache Seitenlogik zu verarbeiten.