Backbone. Часть 1. Модели, коллекции и представления

Сегодня я напишу небольшое приложение на Backbone, например канонический телефонный справочник. И по шагам, начиная с азов покажу как всё работает. Поехали.

Что такое Backbone? Это и фреймворк и способ организации вашего js-приложения. Он проще чем Ember, и на мой взгляд логичнее чем Angular. На его изучение уйдёт никак не больше месяца, а освоив этот инструмент вы вполне сможете претендовать на начинающие позиции во frontend разработке.

Основа основ – модели. Минимальной единицей приложения на Backbone являются модель.:

Создана первая модель которая состоит из нескольких полей и пары методов. Пока всё довольно просто, модель – каркас наших данных. Обратите внимание на метод initialize, им обладает любой “каркас” в Backbone, и именно он вызывается перед созданием объекта по этому каркасу. Другими важными составляющими модели являются события и валидация, но о них поговорим позже.

Чтож, у нас есть каркас, есть данные по этому каркасу – mytya и oksana, всё готово чтобы показать их на странице.

Важно понять, основа всего представления, главный элемент – el или $el. el – это будущий элемент DOM в который вы вставляете все свои данные (this.$el.append).

Ура, первое, самое простое приложение готово. И вы, надеюсь, разобрались что такое модель и представление.

На очереди “Коллекции”, давайте создадим новую коллекцию и отметим что в неё могут входить определённые модели:

Для того чтобы добавить наши контакты в коллекцию ContactCollection можно использовать встроенный в коллекции метод add, или просто передать массив объектов.

У нас есть View для модели, но нет для списка. Давайте уже создадим, тем более там мы будем использовать уже созданный ContactView.

На этом первая часть завершена, дальше я расскажу о роутерах и мы создадим простой справочник контактов с хранением контактов в localStorage и поиском по ним.

P.S. Завершённый код этой статьи:

Ссылки по теме:

– http://habrahabr.ru/company/piter/blog/212023/
– http://beletsky.net/blog/categories/backbone-dot-js/

2 thoughts on “Backbone. Часть 1. Модели, коллекции и представления”

  1. Здравствуйте, подключив ваш код получил такую ошибку в консоли
    backbone.js:1101 Uncaught TypeError: Backbone.$ is not a function
    не могу разобраться с ее решением. Есть ли у вас мысли по этому поводу?

Leave a Reply

Your email address will not be published. Required fields are marked *