Подготовка окружающей среды
Перед официальным изучением костяка, вам нужно что -то подготовить:
Во -первых, вам необходимо получить исходный файл Framework Framework: http://documentcloud.github.com/backbone/
Backbone полагается на основной метод подчеркивания фреймворка, поэтому вам также необходимо загрузить исходный файл подчеркивающей структуры: http://documentcloud.github.com/underscore/
В основе, операции на DOM и событиях полагаются на сторонние библиотеки (такие как jQuery или Zepto), вам нужно только выбрать один из них для загрузки:
jQuery: http://jquery.com/
Zepto: http://zeptojs.com/
Кажется, что это громоздко, но цель основы состоит в том, чтобы использовать простые рамки для создания сложных приложений, поэтому проблема не означает, что это сложнее.
Вы можете создать новую HTML -страницу и принести эти фреймворки, например:
<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> javascript" </script> <script> javascript "</script> <script>"
На этом этапе вы готовы к окружающей среде, которую вы должны запустить.
Привет, мир
Давайте сначала поговорим о функциях этого Helloworld: на странице есть кнопка отчета, нажмите во всплывающее окно ввода, введите контент, подтвердите, а содержимое будет добавлено на страницу. Изображение страницы выглядит следующим образом:
Давайте посмотрим на код ниже:
<! Doctype html> <html> <head> <title> the5fire.com-backbone.js-hello world </title> </head> <body> <button id = "check"> отчет </button> <ul id = "world-list"> </ul> <a href = "http://www.the5fire. 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 src = "http://documentcloud.github.com/backbone/backbone-min.js"> </script> <script> (function ($) {world = backbone.model.extend ({// Создание объекта мира с именем атрибута: null}); worlds = backbone.collection.exten Options) {this.bind ("Add", Options.view.addoneworld); {Щелкните #CHECK »:« Проверка », // Связьте, связывайте элемент с помощью идентификатора in dom}. Function (Model) {$ ("#World-List"). Append ("<li> Вот приветствие от <b>" + model.get ('name') + "</b> Планета: Hello World! </li>");Я думаю, что код интуитивно понятен. Он включает в себя три части основания, представления, модели и сбора, и будет упомянута позже. Пока вы понимаете его здесь, модель представляет модель данных, сборник - это коллекция моделей, а представление используется для обработки страниц и простой логики страниц.