Marionette.View

A View используется для управления частями DOM с помощью одного родительского элемента DOM или el. Он предоставляет согласованный интерфейс для управления содержимым el, который обычно администрируется путем сериализации Backbone.Model или Backbone.Collection и рендеринга шаблона с сериализованными данными в View el.

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

View включает:

• API DOM
• События класса
• Взаимодействия с DOM
• Пузырение событий дочерних элементов
• События сущностей
• Рендеринг представления
• Предварительно отрисовываемое содержимое
• Жизненный цикл представления

У View могут быть Region и Behavior

Индекс документации

• Инициализация представления
• Рендеринг представления
  • Использование представления без шаблона
• Жизненный цикл и события представления
• События сущностей
• Взаимодействия с DOM
• Поведения
• Управление дочерними элементами
  • Размещение представлений - Регионы
  • Отображение дочернего представления
  • Прикрепление дочернего представления
  • Открепление дочернего представления
  • Удаление дочернего представления
  • Доступность региона
• Эффективные вложенные структуры представлений
• Прослушивание событий дочерних элементов

Инициализация представления

При инициализации View есть несколько свойств, которые, если переданы, будут прикреплены непосредственно к экземпляру: attributes, behaviors, childViewEventPrefix, childViewEvents, childViewTriggers, className, collection, collectionEvents, el, events, id, model, modelEvents, regionClass, regions, tagName, template, templateContext, triggers, ui

import { View } from 'backbone.marionette';

const myView = new View({ ... });

Некоторые из этих свойств происходят от Marionette, но многие унаследованы от Backbone.View.

Рендеринг представления

Представление Marionette реализует мощный метод render, который, получив template, построит ваш HTML из этого шаблона, смешав данные model или collection и любые дополнительные данные контекста шаблона.

В отличие от Backbone.View, Marionette определяет render, и этот метод не следует переопределять. Для добавления функциональности к render используйте render и before:render события.

Пример

Для получения более подробной информации о рендеринге шаблонов см. Рендеринг шаблонов представления.

Использование представления без шаблона

Установив template на false, вы можете полностью отключить рендеринг представления и события. Это может быть полезно в тех случаях, когда вам нужен только el или у вас есть prerendered content, который вы не хотите перерисовывать.

Жизненный цикл и события представления

Инициализированное View знает о своем состоянии жизненного цикла и будет генерировать события, связанные с изменением этого состояния.

Состояния представления показывают, отрисовано ли представление, прикреплено ли оно к DOM или удалено.

Подробнее:

• Жизненный цикл представления
• События изменения DOM представления
• События уничтожения представления

События сущностей

View может привязываться к событиям, которые происходят на прикрепленной model и collection, — это включает в себя как стандартные события backbone, так и пользовательские события.

Подробнее:

• События сущностей

Взаимодействия с DOM

В дополнение к тому, что предоставляет Backbone, представления имеют дополнительный API для взаимодействия с DOM: events, triggers, и ui.

Подробнее:

• Взаимодействия с DOM

Поведения

Behavior обеспечивает чистое разделение проблем в вашем представлении логики, позволяя вам обмениваться общими пользовательскими операциями между вашими представлениями.

Подробнее:

• Использование Behavior

Управление дочерними элементами

View предоставляет простой интерфейс для управления дочерними представлениями с помощью showChildView, getChildView и detachChildView. Эти методы обращаются к regions внутри представления. Мы рассмотрим это здесь, но для более подробной информации см. документацию по регионам.

Размещение представлений - Регионы

Класс Marionette.View позволяет нам управлять иерархией представлений с помощью regions. Регионы являются точками входа, которые позволяют нам отображать представления внутри представлений, управлять жизненными циклами отображения/скрытия и действовать на события внутри дочерних элементов.

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

Регионы идеально подходят для рендеринга макетов приложений путем изоляции проблем внутри другого представления. Это особенно полезно для независимого перерендеринга фрагментов приложения без необходимости полного перерисовывания всего экрана каждый раз, когда какие-либо данные обновляются.

Регионы могут быть добавлены в представление при определении класса с помощью regions или во время выполнения с помощью addRegion.

При расширении View, мы используем атрибут regions для указания селектора, где будет отображаться новое представление:

import _ from 'underscore';
import { View } from 'backbone.marionette';

const MyView = View.extend({
  template: _.template(`
    <div id="first-region"></div>
    <div id="second-region"></div>
    <div id="third-region"></div>
  `),
  regions: {
    firstRegion: '#first-region',
    secondRegion: '#second-region'
  }
});

Пример

Когда мы отображаем представления в регионе, содержимое #first-region и #second-region будет заменено содержимым отображаемого представления. Значение в хеше regions — просто селектор jQuery, и любой допустимый синтаксис jQuery будет приемлемым.

Отображение дочернего представления

Чтобы отобразить представление внутри региона, просто вызовите showChildView(regionName, view). Это позволит вам выполнить рендеринг HTML представления и прикрепить его к DOM:

import _ from 'underscore';
import { View } from 'backbone.marionette';
import SubView from './subview';

const MyView = View.extend({
  template: _.template('<h1>Title</h1><div id="first-region"></div>'),

  regions: {
    firstRegion: '#first-region'
  },

  onRender() {
    this.showChildView('firstRegion', new SubView());
  }
});

Примечание: если view.showChildView(region, subView) вызывается до того, как view было отображено, он автоматически отобразит view, чтобы регион el существовал в DOM.

Пример

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

Чтобы получить доступ к дочернему представлению View, используйте метод getChildView(regionName). Он вернет экземпляр представления, который в данный момент отображается в этом регионе, или null:

import _ from 'underscore';
import { View } from 'backbone.marionette'
import SubView from './subview';

const MyView = View.extend({
  _.template('<h1>Title</h1><div id="first-region"></div>'),

  regions: {
    firstRegion: '#first-region'
  },

  onRender() {
    this.showChildView('firstRegion', new SubView());
  },

  onSomeEvent() {
    const first = this.getChildView('firstRegion');
    first.doSomething();
  }
});

Пример

Если представление недоступно, getChildView возвращает null.

Открепление дочернего представления

Вы можете отсоединить дочернее представление от региона с помощью detachChildView(region)

import _ from 'underscore';
import { View } from 'backbone.marionette'
import SubView from './subview';

const MyView = View.extend({
  template: _.template(`
    <h1>Title</h1>
    <div id="first-region"></div>
    <div id="second-region"></div>
  `),
  regions: {
    firstRegion: '#first-region',
    secondRegion: '#second-region'
  },

  onRender() {
    this.showChildView('firstRegion', new SubView());
  },

  onMoveView() {
    const view = this.detachChildView('firstRegion');
    this.showChildView('secondRegion', view);
  }
});

Это псевдоним для region.detachView()

Удаление дочернего представления

Существует два способа легко удалить дочернее представление.

// Directly
myChildView.getChildView('regionName').destroy();

// Indirectly
myChildView.getRegion('regionName').empty();

Доступность региона

Все определенные регионы внутри View будут доступны для View или любому вызывающему коду сразу после отображения View. При использовании getRegion или любого из методов дочерних представлений сначала отображается представление, чтобы регион был доступен.

Эффективные вложенные структуры представлений

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

Marionette предоставляет простой механизм для бесконечного вложения представлений в одном рисовании: просто отобразите все дочерние элементы в функции обратного вызова onRender для события render.

import { View } from 'backbone.marionette';

const ParentView = View.extend({
  // ...
  onRender() {
    this.showChildView('header', new HeaderView());
    this.showChildView('footer', new FooterView());
  }
});

myRegion.show(new ParentView());

В этом примере вложенная структура представления будет отображена в одном рисовании.

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

Прослушивание событий дочерних элементов

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

Подробнее:

• Пузырение событий дочерних элементов