Що нового в Marionette.js 3.0?


Минуло більше 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 {
версія: '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 репозиторій

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.