Прошло более 2-х лет с того времени как 3-я версия начала разрабатываться и вот наконец-то сегодня она была зарелизена! Итак, кому интересно, кто ждал и работает с Marionette.js — добро пожаловать в подкат.
Ребята с кор команды очень хорошо поработали и добавили парочку хороших изменений.
Давайте начнем.
View
Marionette.View заметно преобразовалось. Теперь это не просто неспользуемый класс, как мы помним из документации версии 2
Note: The Marionette.View class is not intended to be used directly
а полноценная View.
Более того, она теперь содержит в себе и Marionette.View, и Marionette.ItemView и Marionette.LayoutView. Да, как вы поняли теперь у нас больше нет ни Marionette.ItemView ни Marionette.LayoutView, они были удалены. Для того чтобы использовать 3-ю версию в коде нужно лишь заменить ваши Marionette.ItemView и Marionette.LayoutView на Marionette.View и все.
Давайте рассмотрим небольшой примерчик:
import Mn from ‘backbone.marionette’;
const MyView = Mn.View.extend({
template: _.template(‘<h1>Превый заголовок для 3-й версии</h1>’),
onRender() {
console.log(‘Моя вью была отрендерена’)
}
});
И пример как использовать View в качестве LayoutView
import Mn from ‘backbone.marionette’;
const MyView = Mn.View.extend({
regions: {
region1:’#region1′,
region2: ‘#region2’
},
onRender() {
this.showChildView(‘region1’, childView1);
this.showChildView(‘region2’, childView2);
}
});
С этим разобрались. Идем дальше.
CompositeView
Marionette.CompositeView стала deprecated что вызывает сразу множество вопросов. Как мне теперь создать табличку или деревовидное меню как это было рекомендовано в документации? Все очень просто, для этого нужно использовать Marionette.View и Marionette.CollectionView. Ребята приготовили хорошие сравнительные примеры как для таблиц так и для деревовидных меню.
Кстати, документация для новой версии заметно улучшилась. Над ней хорошо поработал Scott Walton, он же автор Marionette Guides.
CollectionView
Marionette.CollectionView осталось в основном без изменений. Методы getChildView и getEmptyView были удалены. Вместо этого можно делать так
Mn.CollectionView({
childView() {
// мой код
},
emptyView() {
// мой код
}
});
Так же, Backbone.BabySitter удален из зависимостей и полностью интегрирован в ядро фреймворка. Теперь давайте просто освежим память небольшим примерчиком.
import Mn from ‘backbone.marionette’;
const data = [
{
item: ‘Превая запись’
},
{
item: ‘Вторая запись’
},
{
item: ‘Третья запись’
}
];
const collection = new Backbone.Collection(data);
const childViewTemplate = _.template(‘<%= item %>’);
const ChildView = Mn.View.extend({
template: childViewTemplate
});
const collectionView = new Mn.CollectionView({
el: ‘body’,
childView: ChildView,
collection: collection
});
collectionView.render();
View.Events
Жизненный цикл View претерпел изменений. События before:show и show были удалены. Теперь он выглядит так:
before:render -> render -> before:attach -> attach -> dome:refresh
before:detach -> detach -> before:destroy -> destroy
Пример
import Mn from ‘backbone.marionette’;
const MyView = Mn.View.extend({
template: false,
onBeforeRender() {
console.log(1)
},
onRender() {
console.log(2)
},
onbeforeDestroy() {
console.log(3)
},
onDestroy() {
console.log(4);
}
});
const myView = new MyView();
myView.render();
myView.destroy();
ChildView Events
API немного изменилось и теперь вместо childEvents нужно использовать childViewEvents.
import Mn from ‘backbone.marionette’;
const MyView = Mn.View.extend({
childViewEvents: {
‘some:event’: ‘eventHandler’
}
eventHandler() {
console.log(‘Событие дочернего елемента’);
}
});
Templates
templateHelpers был переименован в templateContext.
import Mn from ‘backbone.marionette’;
const MyView = Mn.View.extend({
template: template,
templateContext() {
return {
version: ‘3.0’
}
}
});
Backbone.Radio
На смену Backbone.Wreqr пришел Backbone.Radio — мощная библиотека для общения между модулями в приложении.
Backbone.Radio плотно интегрирован в Marionette.Object что дает возможность слушать все события приложения в одном месте.
Изменения в API
— `bindEntityEvents` -> `bindEvents`
— `unbindEntityEvents ` -> `unbindEvents`
— `normalizeUIString`, `normalizeUIKeys`, `normalizeUIValues` -> `normalizeMethods`
— `proxyGetOption` -> `getOption`
— `proxyBindEntityEvents` -> `bindEvents`
— `proxyUnbindEntityEvents` -> `unbindEvents`
Что было удалено?
- Marionette.Controller
- Marionette.Module
- Marionette.RegionManager
Переезд на новую версию должен быть не очень болезненным.
Вот коммиты одного из лидеров кор команды Paul Falgout в один из своих проектов:
templateHelpers -> templateContext
Marionette.ItemView -> Marionette.View
Marionette.LayoutView -> Marionette.View
childEvents -> childViewEvents
render:collection / onRenderCollection -> render:children / onRenderChildren
before:show / show / onBeforeShow / onShow -> attach etc
Чтобы облегчить жизнь разработчикам, была создана баблиотека marionette-v3-compat.
Так же есть примеры третьей версии с разными сборщиками проектов.
Marionette.js github репозиторий
Какую библиотеку Вы используете для фронтенд приложений?
Marionette.js
Backbone.js
Angular.js
Ember.js
React.js
Vue.js
Другой вариант
Не использую фреймворков
Проголосовало 187 человек. Воздержалось 45 человек.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Свежие комментарии