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/

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *