Preparação ambiental
Antes de estudar formalmente a espinha dorsal, você precisa preparar algo:
Primeiro, você precisa obter o arquivo de origem da estrutura de backbone: http://documentcloud.github.com/backbone/
O backbone conta com o método básico da estrutura do sublinhamento, portanto, você também precisa baixar o arquivo de origem da estrutura do sublinhamento: http://documentcloud.github.com/underscore/
Na espinha dorsal, as operações no DOM e os eventos dependem de bibliotecas de terceiros (como jQuery ou Zepto), você só precisa selecionar um deles para baixar:
jQuery: http://jquery.com/
ZEPTO: http://zeptojs.com/
Parece que é um complicado, mas o objetivo da espinha dorsal é usar estruturas simples para criar aplicativos complexos, portanto, o problema não significa que seja complicado.
Você pode criar uma nova página HTML e trazer essas estruturas, assim:
<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="underscore/underscore-min.js"></script> <script type="text/javascript" src="backbone/backbone-min.js"></script>
Neste ponto, você está pronto para o ambiente que você deve executar a espinha dorsal.
Olá mundo
Vamos falar sobre as funções deste helloworld: há um botão de relatório na página, clique na caixa de entrada pop-up, insira o conteúdo, confirme e o conteúdo será adicionado à página. A imagem da página é a seguinte:
Vamos ver o código abaixo:
<! Doctype html> <html> <head> <title> the5fire.com-backbone.js-hello mundo </ititle> </ad Head> <body> <button id = "check"> relatório </button> <ul id = "world-list"> </ul> <a href = "http://wwww.the5"> src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script src = "http://document.github.com/undercore/underscore-min.jjs" src = "http://documentCloud.github.com/backbone/backbone-min.js"> </script> <cript> (function ($) {World = backbone.model.extend ({// crie um objeto mundial com nome nomes: null}); munds = backbone.clection.coll. {this.bind ("add", option.view.addoneworld); #check ":" check -in ", // vinculação de eventos, vincule o elemento com a identificação de check -in}, check -in: function () {var world_name = prompt (" posso perguntar, qual estrela você é? "); if (mundial_name ==" ") world_name = 'desconhecida'; var World = New World ({name: _n); function (modelo) {$ ("#Lista mundial"). Appender ("<li> Aqui está uma saudação de <b>" + modelo.get ('nome') + "</b> planeta: hello world! </li>");Eu acho que o código é intuitivo. Envolve as três partes da espinha dorsal, vista, modelo e coleção e serão mencionadas posteriormente. Desde que você o entenda aqui, o modelo representa um modelo de dados, a coleção é uma coleção de modelos e a exibição é usada para processar páginas e lógica de página simples.