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

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

Доступен инструмент обновления, подробно описывающий критические изменения.

По возможности, мы документируем, как внести изменения в Marionette 2.x, чтобы ваши приложения продолжали работать и облегчить задачу обновления до Marionette 3.

Вы можете запустить Marionette 3 наряду с Marionette 2 с помощью функции Marionette.noConflict().

Представления

Самым заметным изменением в Marionette 3 является объединение ItemView и LayoutView в View. Кроме того, CompositeView было удалено, а его функциональность объединена в CollectionView и View.

Удаление LayoutView и ItemView

Использование отдельных View LayoutView и ItemView излишне усложняло API Marionette. Новое View заменяет всё это и устанавливает чёткие рекомендации по построению структуры макета.

Обновление для Marionette 2.x

Для обновления в Marionette 2.x рекомендуется изменить все экземпляры ItemView на LayoutView.

Обновление до Marionette 3

Измените все экземпляры LayoutView и ItemView на View. Любые представления, которые ранее расширяли View с настраиваемым render, должны работать практически без изменений.

Удаление CompositeView

CompositeView было устаревшим и его следует заменить на использование View и CollectionView. CompositeView будет полностью удалено в Marionette 4.

См. CollectionView для получения подробной информации об обновлении до Marionette 3. Этот метод работает как в Marionette 2.x, так и в Marionette 3.

Удаление CollectionView.getChildView()

Метод getChildView был удалён в пользу свойства childView, которое теперь принимает функцию.

Обновление до Marionette 3

Просто замените все экземпляры getChildView на childView.

Удаление CollectionView.getEmptyView()

Метод getEmptyView был удалён в пользу свойства emptyView, которое теперь принимает функцию.

Обновление до Marionette 3

Просто замените все экземпляры getEmptyView на emptyView.

Обработчики событий дочерних элементов

Атрибут childEvents был переименован в childViewEvents.

Передача событий дочерних элементов на один уровень выше теперь удалена в большинстве случаев и устарела до полного удаления. На этом больше нельзя полагаться. Чтобы передать события дальше по цепочке, вы должны явно использовать childViewTriggers для преобразования события дочернего элемента в событие родительского элемента. Эти события могут быть перенаправлены до необходимого уровня.

Поднимаемые дочерние события больше не передают childView неявно и передают только аргументы, переданные как часть triggerMethod. Это означает, что аргументы, переданные onEvent и onChildviewEvent, теперь идентичны. Для получения дополнительной информации см. документацию по жизненному циклу событий.

В Marionette 2 childEvents привязывались к каждому событию. В Marionette 3 childViewEvents привязываются один раз и кешируются. Это означает, что вы не можете добавлять новые события после создания представления.

Триггеры представления triggers

Атрибут представления triggers больше не передаёт атрибут options обработчикам событий, вместо этого передаётся экземпляр представления, которое инициировало событие.

События

В Marionette 3 было изменено или удалено несколько событий жизненного цикла. Информация о удалённых, изменённых или добавленных событиях, а также рекомендации по обновлению вашего кода будут здесь.

show и before:show

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

Обновление для Marionette 2.x

Замените все экземпляры onShow, on('show'), onBeforeShow и on('before:show') на использование событий render и before:render. Это рекомендация для Marionette 3 и гарантирует, что дерево DOM будет построено в памяти до изменения DOM.

Обновление до Marionette 3

Замените все экземпляры show и before:show на render и before:render. Если вы хотите, чтобы представление было отображено в DOM, прослушайте событие dom:refresh.

Изменения в region.show()

Метод region.show() (который также поддерживает showChildView()) был изменён таким образом, что не удаляет HTML вне $el отображаемого представления. В Marionette 2 метод region.show() вызывал region.$el.empty() перед отображением нового HTML.

В Marionette 3 это было изменено на отключение region.currentView от DOM, удаление всех обработчиков событий, а затем удаление. Любой HTML, добавленный в область, который не содержится в DOM представления, не будет удалён.

Например:

var _ = require('underscore');
var Mn = require('backbone.marionette');

var app = require('./app');

var MyView = Mn.View.extend({
  template: _.template('View contents')
});

var ParentView = Mn.View.extend({
  template: _.template('<div class="view-hook"></div>'),
  regions: {
    child: '.view-hook'
  }
});

var parent = new ParentView();
app.showView(parent);

var child = new MyView();

parent.showChildView('child', child);
parent.getRegion('child').$el.append('<p>Not removed</p>');
parent.showChildView('child', new MyView());

В Marionette 2 вывод HTML будет следующим:

<div class="view-hook">
  <div>View contents</div>
</div>

В Marionette 3 HTML будет следующим:

<div class="view-hook">
  <p>Not Removed</p>
  <div>View contents</div>
</div>

Аргументы для событий жизненного цикла

Аргументы для ряда событий жизненного цикла были изменены. Для согласованности все события теперь будут получать представление, которое генерирует событие, в качестве первого аргумента. Для получения более подробной информации см. документацию по жизненному циклу представлений.

Обновление до Marionette 3

Следующие события с соответствующим событием before: были изменены и, возможно, требуют обновления:

Шаблоны

Самым существенным изменением в шаблонах является переименование templateHelpers в templateContext — цель состоит в том, чтобы больше соответствовать терминологии других фреймворков.

Обновление до Marionette 3

Просто замените все экземпляры templateHelpers на templateContext

Области

Существует ряд изменений в поведении областей — самым существенным изменением является удаление возможности доступа к областям как к атрибутам.

Удаление view.region

Синтаксис view.<region_name> был удалён в пользу view.getRegion(), view.getChildView() и view.showChildView().

Обновление для Marionette 2.x

Измените все ссылки на view.region на view.getRegion('region'). Например, в Mn 2.x и ниже:

var AnotherView = require('./anotherview');

var MyView = Mn.LayoutView.extend({
  regions: {
    myregion: '.regionname'
  },

  onRender: function() {
    this.myregion.show(new AnotherView());
  }
});

Это не работает в Mn 3 — вместо этого выполните:

var AnotherView = require('./anotherview');

/* In Mn 2.x we can just use LayoutView */
var MyView = Mn.View.extend({
  regions: {
    myregion: '.regionname'
  },

  onRender: function() {
    this.showChildView('myregion', new AnotherView());
  }
});

См. документацию по представлениям, чтобы узнать больше о том, как управлять областями в Marionette 3.

Модули

Модули Marionette были полностью удалены в пользу использования стандартных загрузчиков модулей JavaScript, например Webpack или Browserify. См. документацию по установке для списка потенциальных вариантов.

Backbone.Babysitter

Зависимость от Backbone.Babysitter была удалена в пользу встроенной реализации, которая поддерживается в основном коде Marionette.

Babysitter предоставляет простой способ управления дочерними представлениями в Backbone/Marionette или любым объектом, управляющим списками представлений. Внешняя библиотека Babysitter использовалась в Marionette для управления CollectionView дочерними элементами.

Основные различия

Основное различие между Babysitter и реализацией Marionette заключается в удалении .call и .apply на CollectionView.children. Вместо этого вы должны использовать .invoke или любой из предоставленных методов.

Например:

var MyCollectionView = require('./views');
var MyCollection = require('./collections');

var collection = new MyCollection();
collection.fetch();

var myView = new MyCollectionView({collection: collection});
myView.children.invoke('render');
myView.children.map(function(view) {
  view.doMethod();
});