Создание одностраничных приложений на примере backbone.js

Что такое backbone.js?

Для чего он?

Подключение backbone.js

      <script src="js/jquery.js"></script>
      <script src="js/underscore.js"></script>
      <script src="js/backbone.js"></script>
      <script src="js/main.js"></script>

Модели данных в backbone

      var List = Backbone.Model.extend({
        defaults: {
          id: -1,
          name: 'Default TODO list',
        }
      });

Создание экземпляра модели

      var list1 = new List({
          id: '1',
          name: 'Список дел на сегодня'
      });

Получаем данные из DOM-элемента

      var ListView = Backbone.View.extend({ ... }, {
        getData: function ($el) {
          return {
            id: $el.data("list-id"),,
            name: $el.find(".todo__name").text()
          };
        }
      });

Привязка модели к вьюхе

      var listView = new ListView({
        el: element, //связываем вьюху с конкретным DOM-элементом
        model: listModel  //связываем вьюху с моделью
      });

      function initListModels(){
        var models = [];
        $(".todo").each(function(){
          var listModel = new List(ListView.getData($(this)));
          var listView = new ListView({
            el: this,
            model: listModel
          });
          models.push(listModel);
        });
        return models;
      }

Создаём коллекцию экземпляров

      var ListCollection = Backbone.Collection.extend({
        model: List, 
        url: "/lists", //для формирования AJAX запросов
        initialize: function () {
          ...
        }
      });

Создание модели, вьюхи и коллекции

      var model = Backbone.Model.extend({ ... });
      var view  = Backbone.Collection.extend({ ... });
      var coll  = Backbone.View.extend({ ... });

HTML шаблон

      <script type="text/x-template" id="template">
        <article class="todo" data-list-id="<%= id %>">
          <div class="todo__header">
            <h3 class="todo__name"><%= name %></h3>
          </div>
        </article>
      </script>

Рендер шаблона

      var ListView = Backbone.View.extend({
        render: function () {
          var listTemplate = _.template($("#template").text());
          var data = this.model.toJSON();
          var markup = listTemplate(data);
          this.setElement( $(markup).get(0) );
        },
      });

Инициализация добавления экземпляра в коллекцию

      //jQuery обработчик
      $("#button").on("click", function(){
        //формируем массив data  
        var data = {id: 10, name: 'Очередной туду-лист'};  
        lists.add(data)  
      });

Добавления экземпляра в коллекцию

      //Backbone обработчик
      lists.on("add", function( model ) {
        var view = new ListView({ model: model });
        view.render();
        $(".lists").append(view.$el);
      });

DOM-события в backbone

      var ListView = Backbone.View.extend({
        events: {
          "click .todo__action_remove": "removeAction"
        },
        removeAction: function (e) {
          this.$el.remove();
          this.model.remove();
        }
      });

Роуты

Создание роутов

      var Router = Backbone.Router.extend({
        routes: {
          '': 'index'
          'list': 'list'
        },
      
        index: function() { //сценарий для индексной страницы }
        list: function() { //cценарий для страницы /#list }
      });

Запуск роутов

      var router = new Router();
      Backbone.history.start();

По дефолту роуты работают через хэш (#)

        http://test.ru/#first-route

Работа роутов через pushState

      var router = new Router();
      Backbone.history.start({pushState: true});

Теперь ваши роуты будут без хэша

          http://test.ru/pretty-route

Wildcard routes

        routes: {
          '': 'index'
          'list/:id': 'getList'
          'list/:id/edit': 'editList'
        },
        ...
        editList: function(id) { ... }

Splat routes

        routes: {
          '': 'index'
          'list/:id': 'getList'
          'list/:id/*action': 'actionList'
        },
        ...
        actionList: function(id, action) { ... }

Почитать

backbonejs.org — официальная документация
backbonejs.ru — документация по-русски
Backbone Fundametals — книга по backbone в открытом доступе на гитхабе автора (Addy Osmani)
Noteskeeper — Блог Владимира Кузнецова. Много интересного и не только про backbone

Спасибо!

Константин Зотов, Новый мир

http://kzotov.ru/p/backbone/ — презентация
http://todo.kzotov.ru/ — приложение