В нашем проекте мы используем Backbone.js в качестве основного фреймворка JS. Почему выбор пал именно на него, я, наверное, расскажу в одном из следующих постов, но на этот раз мы поговорим о другом.
Как известно, Backbone «из коробки» предлагает весьма скромные возможности, но компенсирует это максимальной гибкостью.
Поскольку Backbone существует довольно давно и успел обзавестись серьезным сообществом разработчиков, для решения многих типичных проблем Backbone-приложений сегодня существуют плагины или целые фреймворки, построенные поверх Backbone (многие знают, например Позвоночник.
Марионетка , недавно вышедший выглядит очень многообещающе База — кстати, советую присмотреться).
Однако есть одна достаточно распространенная задача, для которой я пока не нашел адекватного решения: речь идет о создании стандартных автономных элементов пользовательского интерфейса.
Допустим, ваш проект использует элемент выбора даты; для его создания вы используете плагин jQuery, который вы нашли на просторах GitHub. С этим последним все в порядке, за исключением того, что вам нужно вручную вытягивать его каждый раз, когда соответствующий ввод появляется на вашей странице, а затем, возможно, еще и очищать создаваемую им разметку, чтобы избежать дальнейших конфликтов.
В конечном итоге вы пишете много повторяющегося кода.
Вот тут-то и пригодится Backbone.Component.
Применение
Идея Backbone.Component во многом схожа с веб-компонентами и компонентами в Эмбер..
Каждый компонент представляет собой изолированный элемент пользовательского интерфейса со своей разметкой и логикой.
Объявление компонента
Чтобы создать свой компонент, вам необходимо объявить класс, унаследованный от Backbone.Component, и переопределить в нем 3 метода: Backbone.Components.MyDate = Bakcbone.Component.extend(
{
generate: function( ) { .
},
activate: function( ) { .
},
deactivate: function( ) { .
}
}
);
- генерировать — метод генерации разметки.
Он может получать любые параметры и должен возвращать строку (сгенерированный HTML).
- active — код активации компонента.
Метод не получает параметров и не возвращает значения.
В нашем примере с датами это может выглядеть примерно так:
-
Как Изучить Abap?
19 Dec, 24 -
Обогнал Apple В Борьбе За Рынок Сша
19 Dec, 24 -
Некролог
19 Dec, 24 -
Взломанная Drm-Защита Allofmp3
19 Dec, 24 -
Визуализация Алгоритмов
19 Dec, 24
