BackBone.Js

В прошлой статье был описан фреймворк Angular.JS. И конечно же уже давно в воздухе висит вопрос «как там дела в других фреймворках?». Вот перехожу к разбору BackBone. Хотя формально Backbone — это библиотека, а не фреймворк.

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

HTML-код примера совсем простой. Здесь пара кнопок и место под будущий список.

<body>
	<div class="main">
		<input id="addButton" type="button" value="Add one more book" />
		<input id="changeButton" type="button" value="Update first book" />
		<div>
			<ul id="bookList"></ul>
		</div>
	</div>
</body>

А вот дальше начинается BackBone. Создаем модель.

// Модель книги
var Book = Backbone.Model.extend({
    defaults: {
        ID: "",
        BookName: ""
    },
    idAttribute: "ID"
});

// Коллекция моделей книги (список книг)
var BooksCollection = Backbone.Collection.extend({
    model: Book
});

Здесь вроде бы все интуитивно понятно. Модель Book создается через Backbone.Model.extend(), а через Backbone.Collection.extend() создается коллекция моделей Book.

Далее переходим к созданию видов. Понадобится сделать 2 вида. Первый — отображение одной книги, а второй — отображение списках (коллекции) книг.

// View для книги
var bookView = Backbone.View.extend({

    tagName: 'li',
    model: Book,

    initialize: function() {
        // Слушаем обновления модели (события изменения)
        this.listenTo(this.model, 'change', this.render);
    },

    render: function (){
        this.$el.html('<li>' + this.model.get('BookName') + '</li>');
        return this;
    }
});

// View для коллекции книг
var bookListView = Backbone.View.extend({
    model: BooksCollection,

    initialize: function() {
        // Слушаем обновления модели (события добавления)
        this.listenTo(this.model, 'add', this.modelUpdated);
    },

    modelUpdated: function() {
        this.render();
    },

    render: function() {
        this.$el.html('');
        
        for(var i = 0; i < this.model.length; ++i) {
            // Создаем экземпляр вида для каждой книги
            var tBookView = new bookView({model: this.model.at(i)});
            // Добавляем вид книги в вид списка книг
            this.$el.append(tBookView.$el);
            // Отрисовывем вид списка
            tBookView.render();
        }
        return this;
    }
});

Виды создаются через Backbone.View.extend(). Вид связывается с моделью через свойство model. Для отрисовки вида служит метод render(). В первом случает этот метод создает один пункт списка, а во втором в цикле вызывается одноименный метод первого вида.

В методах initialize() мы производим привязку  обработчиков событий моделей. В виде связанном с экземпляром модели книги мы обрабатываем событие change, а в виде для списка книг обрабатываем add. Это нужно для будущей работы кнопок управления списком.

И наконец, логика нашего простого приложения.

$(document).ready(function () {
	// Создаем несколько экземпляров модели (книг)
	var book1 = new Book({ ID: 1, BookName: "Book 1" });
	var book2 = new Book({ ID: 2, BookName: "Book 2" });
	var book3 = new Book({ ID: 3, BookName: "Book 3" });
	var book4 = new Book({ ID: 4, BookName: "Book 4" });
	var book5 = new Book({ ID: 5, BookName: "Book 5" });

	// Добавляем книги в модель
	var bookCollection = new BooksCollection([book1, book2, book3, book4, book5]);

	// Отображаем список книг
	bookList = new bookListView({ el: $("#bookList"), model: bookCollection });
	bookList.render();
	// Привязываем события к кнопкам
	$('#addButton').click(
		function () {
			var i = bookCollection.length + 1;
			var newBook = new Book({ID: i, BookName: 'yet another book_' + i});
			bookCollection.add(newBook);
		}
	);
	$('#changeButton').click(
		function () {
			book1.set('BookName', book1.get('BookName') + '_updated');
		}
	);
});

Думаю, что по комментариям в коде понятен принцип работы. Здесь видно, что в обработчиках кликов по кнопках происходит работа с экземплярами моделей. А на изменения в моделях, как мы видим реагируют наши виды.

Вы можете скачать пример и попробовать работу приложения.

Как можно видеть, так же как и с Angular, с помощью Backbone можно увязать изменения модели с отображением внешнего вида. Однако в Backbone  нужно будет описывать обработку событий для модели. В то время, как Angular делает это более менее самостоятельно опираясь на атрибут ng-model.

Здесь видно, что BackBone низкоуровневый. Здесь придется многое писать руками из того, что в Angular работает само. Но зато при более низкоуровневом подходе у нас больше контроля.

Что именно выбрать, я думаю, будет зависеть от конкретной задачи.

Конечно же возможности BackBone не заканчиваются тем, что описано выше. В Backbone так же, как и в Angular, можно прописывать и правила роутинга, чтобы получить правильные URL, о которых говорилось в прошлой статье. Есть возможность описывать правила валидации модели. Так же есть множество библиотек, которые можно подключить к BackBone для расширения его функционала. Этим в той же мере не может похвастаться Angular. Так что не все так однозначно.

Вот пока что и все. В следующих статьях мы продолжим знакомство  с различными JS фреймворками и узнаем не мало интересного.

 

 

Leave a Reply

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