Préparation environnementale
Avant d'étudier officiellement la colonne vertébrale, vous devez préparer quelque chose:
Tout d'abord, vous devez obtenir le fichier source du framework de l'épine dorsale: http://documentcloud.github.com/backbone/
Backbone repose sur la méthode de base du Framework de sous-ore, vous devez donc également télécharger le fichier source du Framework de sous-ore: http://documentcloud.github.com/underscore/
Dans Backbone, les opérations sur DOM et les événements reposent sur des bibliothèques tierces (comme jQuery ou Zepto), il vous suffit de sélectionner l'un d'eux à télécharger:
jQuery: http://jquery.com/
Zepto: http://zeptojs.com/
Il semble que ce soit un lourd, mais le but de la colonne vertébrale est d'utiliser des cadres simples pour créer des applications complexes, donc les problèmes ne signifient pas qu'il est compliqué.
Vous pouvez créer une nouvelle page HTML et introduire ces frameworks, comme ceci:
<script type = "text / javascript" src = "jQuery / jQuery-1.8.2.min.js"> </ script> <script type = "text / javascrip
À ce stade, vous êtes prêt pour l'environnement que vous devez exécuter l'épine dorsale.
Bonjour le monde
Parlons d'abord des fonctions de ce Helloworld: il y a un bouton de rapport sur la page, cliquez sur la zone d'entrée contextuelle, entrez du contenu, confirmez, et le contenu sera ajouté à la page. L'image de la page est la suivante:
Voyons le code ci-dessous:
<! Doctype html> <html> <éad- head> <itle> the5fire.com-backbone.js-hello world </title> </ad> <body> <Button id = "check"> Rapport </utton> <ul id = "world-List"> </ul> <a href = "http://www.the5fire.com"> plus src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </ script> <script src = "http://documentcloud.github.com/underscore/underscore-in.js"> </cript> </ script> <grit src = "http://documentcloud.github.com/backbone/backbone-min.js"> </ script> <cript> (fonction ($) {world = backbone.model.extend ({// Créer un objet mondial avec le nom d'attribut: null}); worlds = backebone.collection.extend {this.bind ("add", options.view.addoneworld);}}); #Check ":" Checkin ", // Binding des événements, lier l'élément avec ID Check In Dom}, Checkin: function () {var world_name = inside (" puis-je demander, quelle étoile êtes-vous? "); if (world_name ==" ") world_name = 'inconnu'; var world = new World ({nom: world_name}); {$ ("# world-list"). append ("<li> voici une salutation de <b>" + modèle.get ('name') + "</b> Planet: Hello World! </li>");}});Je pense que le code est intuitif. Il s'agit des trois parties de l'épine dorsale, de la vue, du modèle et de la collection, et sera mentionné plus tard. Tant que vous le comprenez ici, le modèle représente un modèle de données, la collection est une collection de modèles et la vue est utilisée pour traiter les pages et la logique des pages simples.