Руководство по обновлению с версии v3 до v4

Marionette 4 вводит ряд критических изменений. Это руководство по обновлению рассмотрит основные изменения и опишет, как изменить ваше приложение, чтобы адаптировать его к ним.

Необходимые изменения

Это критические изменения, которые необходимо учесть при миграции с Marionette v3 на v4

CompositeView был удален

• Старое поведение: CompositeView класс был предоставлен
• Новое поведение: CompositeView не существует
• Причина: Упрощение API
• Решение: Используйте CollectionView вместо него. Большинство функций CompositeView были добавлены в CollectionView, и в большинстве случаев достаточно переименовать класс. Старый CompositeView был абстрагирован в отдельную библиотеку.

Одно из необходимых изменений — явное определение childView при реализации рекурсивного (деревовидного) представления

   // with compositeview
   const TreeView = CompositeView.extend({
     template: 'node-template'
   })

   // with collectionview
   const TreeView = CollectionView.extend({
     template: 'node-template',
     childView () {
       return TreeView
     }
   })

NextCollectionView переименован в CollectionView

• Старое поведение: Оба NextCollectionView и CollectionView были предоставлены
• Новое поведение: Предоставлен только CollectionView, основанный на NextCollectionView. Реализация старого CollectionView была удалена
• Причина: Упрощение API
• Решение: Используйте CollectionView вместо него. Старый CollectionView был абстрагирован в отдельную библиотеку.

Флаг childViewEventPrefix по умолчанию установлен в false

• Старое поведение: Флаг childViewEventPrefix был установлен в true
• Новое поведение: Флаг childViewEventPrefix был установлен в false
• Причина: Повышение производительности
• Решение: Рекомендуется делегировать события дочернего представления только при необходимости. Вместо глобальной активации установите childViewEventPrefix для каждого представления, которому это необходимо. Еще лучше явно определить прокси через childViewEvents и childViewTriggers.

Глобальная инстанция Marionette не привязана к глобальной инстанции Backbone

• Старое поведение: К Marionette можно было получить доступ, используя Backbone.Marionette
• Новое поведение: Marionette не привязан к глобальной инстанции Backbone
• Причина: Поддержка именованных экспортов
• Решение: Импортируйте классы Marionette напрямую или используйте глобальную инстанцию Marionette (при использовании как автономного скрипта)

noConflict был удален

• Старое поведение: noConflict позволял устанавливать несколько версий Marionette.
• Новое поведение: Marionette больше не обрабатывает конфликты внутри.
• Причина: Не используется с ES6
• Решение: Используйте менеджеры пакетов, если требуются несколько версий.

AppRouter был удален

• Старое поведение: Marionette включал маршрутизатор
• Новое поведение: Marionette больше не включает маршрутизатор
• Причина: AppRouter использовался в малом количестве случаев
• Решение: Используйте любой маршрутизатор, включая отдельный AppRouter https://github.com/marionettejs/marionette.approuter

Класс Renderer был удален

• Старое поведение: По умолчанию рендерер можно было изменить, установив Renderer.render
• Новое поведение: Renderer не существует
• Причина: Упрощение API
• Решение: Используйте Marionette.setRenderer, который принимает функцию с той же сигнатурой, что и ожидается от Renderer.render

TemplateCache render удален

• Старое поведение: Предварительно рендерились шаблоны с помощью TemplateCache
• Новое поведение: Шаблоны рендерятся напрямую template(data);
• Причина: TemplateCache используется лишь небольшим числом пользователей.
• Решение: Если нужно, используйте https://github.com/marionettejs/marionette.templatecache

Поиск поведения был удален

• Старое поведение: Поведения представлений можно было необязательно искать с помощью глобальной схемы именования.
• Новое поведение: Определения поведения должны быть определены в представлении.
• Причина: Упрощение API и отсутствие глобальной инстанции Marionette

• Решение: Прикрепите поведения к определениям представлений. В v3

  const MyBehavior = Marionette.Behavior.extend({...});
  
  Marionette.Behaviors.behaviorsLookup = function() {
    return {
      FooBehavior: MyBehavior
    };
  };
  
  const V3View = Marionette.View.extend({
    behaviors: {
      FooBehavior: {}
    }
  });
  

  В v4

  const MyBehavior = Behavior.extend({...});
  
  const V3View = View.extend({
    behaviors: {
      FooBehavior: MyBehavior
    }
  });
  

attachElContent не вызывается, если рендерер представления возвращает значение

• Старое поведение: attachElContent всегда вызывался
• Новое поведение: attachElContent не вызывается, если рендеринг не возвращает значения.
• Причина: Полезно для рендереров, которые изменяют содержимое напрямую.
• Решение: Возвращайте хотя бы пустую строку, если вам необходимо, чтобы вызывался attachElContent

Изменилась поддержка обычного Backbone.View

• Старое поведение: Backbone.View экземпляры поддерживались как есть
• Новое поведение: Чтобы поддерживать Backbone.View необходимо применить Marionette.Events миксин
• Причина: Повышение производительности
• Решение: Если обычный Backbone.View не используется, никаких изменений не требуется, в противном случае примените Marionette.Events миксинto the prototype of the view class intended to be used withMarionette`. Пример:

  // once, in the application start
  import _ from 'underscore';
  import {Events} from 'backbone.marionette';
  _.extend(Backbone.View.prototype, Events);
  

triggerMethodOn был удален

• Старое поведение: Этот метод использовался для triggerMethod объекта, у которого не было этого метода
• Новое поведение: Объекты, которым нужна эта функциональность, должны использовать миксин Marionette.Events
• Причина: Повышение производительности
• Решение: Также как и при поддержке обычного Backbone.View, описанного выше

Функция isNodeAttached была удалена

• Старое поведение: Функция-утилита isNodeAttached была предоставлена
• Новое поведение: isNodeAttached не существует
• Причина: Упрощение API
• Решение: Используйте родной код: document.documentElement.contains(el)

Метод template: false представления теперь игнорирует рендеринг

• Старое поведение: Шаблон не рендерился, но срабатывали события рендеринга
• Новое поведение: События рендеринга больше не будут происходить
• Причина: Предотвращает неправильное использование render
• Решение: template: false часто использовался для создания событий рендеринга, когда рендеринг не выполнялся. Используйте другие хуки или методы, когда шаблон не будет рендериться.

View.showChildView и Application.showView теперь возвращают показанное представление

• Старое поведение: Эти методы возвращали область
• Новое поведение: Эти методы теперь возвращают показанное представление
• Причина: Более полезное возвращаемое значение
• Решение: Используйте getRegion, если область требуется после этого метода

Сериализация данных представления больше не клонирует данные

• Старое поведение: Атрибуты модели всегда клонировались перед рендерингом шаблона
• Новое поведение: Атрибуты модели больше не клонируются
• Причина: Повышение производительности
• Решение: Вряд ли это вызовет проблемы, но если templateContext не определено, шаблоны могут изменить фактические данные модели, если не действовать осторожно. Клонируйте при необходимости.

Представление render больше не привязано к представлению

• Старое поведение: view.render был привязан к представлению
• Новое поведение: view.render больше не привязан к представлению
• Причина: Повышение производительности
• Решение: В большинстве случаев это не повлияет, но если вам нужно вызвать функцию render вне контекста, используйте call или apply.

Область больше не поддерживает свойство selector

• Старое поведение: Свойство selector или el можно было использовать для установки области el.
• Новое поведение: Свойство el можно использовать для установки el.
• Причина: Упрощение API
• Решение: Переименуйте любые selector используемые с областью на el.

Параметр preventDestroy области был удален из show и empty

• Старое поведение: Параметр можно было использовать для предотвращения уничтожения уходящего представления
• Новое поведение: Параметр больше недоступен
• Причина: Упрощение API
• Решение: Используйте detachView в первую очередь, если нужно удалить показанное представление без уничтожения.

Внутренне _.bind было заменено на Function.prototype.bind

• Старое поведение: _.bind использовалось
• Новое поведение: Используется Function.prototype.bind
• Причина: Подготовка к lodash 5
• Решение: Это может повлиять на всех, кто надеется получить поддержку < IE9 от Marionette.

Application, Behavior, и Region больше не наследуются от MnObject

• Старое поведение: Эти классы наследовали от Mn.Object.
• Новое поведение: Эти классы больше ни от чего не наследуются.
• Причина: Поверхностное наследование
• Решение: Если вы изменяете прототип Object, вам, возможно, потребуется изменить и другие.

Функции destroy теперь проксируют только один аргумент

• Старое поведение: Любое количество аргументов, переданных в функции destroy, передавалось в события.
• Новое поведение: Передается только один аргумент
• Причина: Повышение производительности
• Решение: Если вам нужно передать несколько данных через destroy, используйте объект.

defaults был удален из Behavior

• Старое поведение: options и defaults в Behavior были параметрами по умолчанию.
• Новое поведение: Только options определяет параметры поведения по умолчанию
• Причина: Упрощение API
• Решение: Переименуйте любые использования defaults в options.

Опции определения представлений больше не будут переданы в представление initialize.

• Старое поведение: options , определённые в определении представления, были объединены в options и переданы в конструктор Backbone.View
• Новое поведение: Только options , переданные при создании, будут переданы в конструктор Backbone.View.
• Причина: Улучшение производительности
• Решение: Определите любые параметры Backbone.View по умолчанию непосредственно в экземпляре представления, а не вложенном options в определении.

Error утилита стала приватной

• Старое поведение: Класс Marionette.Error был общедоступным.
• Новое поведение: Доступного класса Error нет.
• Причина: Упрощение API и обслуживания

DEV_MODE , отображающий предупреждения о устаревании, стал флагом функции.

• Старое поведение: DEV_MODE был установлен на глобальном объекте Marionette.
• Новое поведение: Используйте setEnabled для установки флага функции DEV_MODE.
• Причина: Глобальный объект Marionette больше не существует.

Рекомендованные изменения (устаревание)

Эти изменения являются необязательными, но рекомендуются для упрощения будущих обновлений

По умолчанию экспорт устарел

• Старое поведение: Пакет экспортировался как модуль UMD со всеми классами/функциями в качестве свойства по умолчанию.
• Новое поведение: Пакет экспортируется как модуль ECMAScript с использованием именованных экспортов. Экспорт по умолчанию со всеми классами по-прежнему
• Причина: Соответствие текущей практике стандартов JS, разрешение «tree shaking»

• Решение: Импортируйте каждый класс/функцию Marionette по отдельности или с помощью ключевого слова * Примеры: ```javascript // используя синтаксис ES модуля // старое поведение import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({});

  // новые поведение // импортировать только нужный класс/функцию import {View} from 'backbone.marionette'; const MyView = View.extend({});

  // или импортировать все (уничтожает любые шансы на tree shaking) import * as Mn from 'backbone.marionette'; const MyView = Mn.View.extend({});

  // или создать модуль, который экспортирует по умолчанию все функции/классы // mymarionette.js -> может быть настроен как псевдоним для marionette или любого другого имени модуля с webpack import * as Mn from 'backbone.marionette'; export default Mn;

  // myview.js import Mn from './mymarionette'; const MyView = Mn.View.extend({});

// используя синтаксис CommonJS

// старое поведение const Mn = require('backbone.marionette'); const MyView = Mn.View.extend({});

// новое поведение const {View} = require('backbone.marionette'); const MyView = View.extend({});

#### `Marionette.Object` was renamed to `Marionette.MnObject`

 * **Old behavior:** The Marionette Object class was exported as `Marionette.Object`
 * **New behavior:** The Marionette Object class is exported as `MnObject`
 * **Reason:** Avoid collision with native `Object` class when using with ES imports
 * **Remedy:** Rename `Marionette.Object` to `MnObject`. To easy transition the Object will still be available on default Marionette export

```javascript
   // using ES module syntax
   // old behavior
   import Mn from 'backbone.marionette';
   const MyObj = Mn.Object.extend({});

   // new behaviors
   // import only needed class/function
   import {MnObject} from 'backbone.marionette';
   const MyView = MnObject.extend({});