Preparación ambiental
Antes de estudiar formalmente la columna vertebral, debe preparar algo:
Primero, debe obtener el archivo fuente de Backbone Framework: http://documentcloud.github.com/backbone/
Backbone se basa en el método básico del marco de subrayamiento, por lo que también debe descargar el archivo de origen del marco de subscore: http://documentcloud.github.com/underscore/
En Backbone, las operaciones en DOM y los eventos se basan en bibliotecas de terceros (como jQuery o Zepto), solo necesita seleccionar una de ellas para descargar:
jQuery: http://jquery.com/
Zepto: http://zeptojs.com/
Parece que es engorroso, pero el propósito de la columna vertebral es usar marcos simples para crear aplicaciones complejas, por lo que los problemas no significan que sea complicado.
Puede crear una nueva página HTML y traer estos marcos, como este:
<script type = "text/javaScript" src = "jQuery/jQuery-1.8.2.min.js"> </script> <script type = "text/javaScript" src = "subscore/subscore-min.js"> </script> <script type = "text/javaScript" src = "backbone/backbone-min-min-min-n.js"> script "> script"> </script "
En este punto, está listo para el entorno, debe correr la columna vertebral.
Hola Mundo
Primero hablemos sobre las funciones de este Helloworld: hay un botón de informe en la página, haga clic en el cuadro de entrada emergente, ingrese el contenido, confirme, y el contenido se agregará a la página. La imagen de la página es la siguiente:
Veamos el código a continuación:
<! Doctype html> <html> <fead> <title> the5fire.com-backbone.js-Hello World </title> </head> <body> <button id = "check"> report </boton> <ul id = "world-list"> </ul> <a href = "http://www.the5fire.com"> más tutorial </a> </script. 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"> </script> <script src = "http://documentcloud.github.com/backbone/backbone-min.js"> </script> <script> (function ($) {world = backbone.model.extend ({// crea un objeto mundial con nombre de atributo: null}); worlds = backbone.collection.extend ({{// colección de la colección de objetos de nombre de nombre: modelos, modelos, modelos); this.bind ("add", options.view.addoneworld); "Haga clic en #Check": "Checkin", // Enlace de eventos, ata el elemento con DOM}, checkin: function () {var world_name = "¿puedo preguntar, qué estrella es usted?" función (modelo) {$ ("#World-List"). Append ("<li> Aquí hay un saludo de <b>" + Model.get ('Name') + "</b> Planet: Hello World! </li>");Creo que el código es intuitivo. Implica las tres partes de la columna vertebral, la vista, el modelo y la colección, y se mencionará más adelante. Mientras lo comprenda aquí, el modelo representa un modelo de datos, la recopilación es una colección de modelos y la vista se utiliza para procesar páginas y lógica de página simple.