Что нового в 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 {
      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 репозиторий

Автор: denar90

Источник