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

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();
});