Предварительно отрисованное содержимое

Просмотр классов можно инициализировать с предварительно отрисованным DOM.

Это может быть HTML, который сейчас находится в DOM:

import { View } from 'backbone.marionette';

const myView = new View({ el: $('#foo-selector') });

myView.isRendered(); // true if '#foo-selector` exists and has content
myView.isAttached(); // true if '#foo-selector` is in the DOM

Или это может быть DOM, созданный в памяти:

import { View } from 'backbone.marionette';

const $inMemoryHtml = $('<div>Hello World!</div>');

const myView = new View({ el: $inMemoryHtml });

Пример в реальном времени

В обоих случаях при инициализации представление определит свое состояние относительно того, отрисовано ли el или прикреплено.

Примечание render и attach события не будут срабатывать для начального состояния, поскольку состояние устанавливается уже при инициализации и не изменяется.

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

С View в большинстве случаев событие render события — лучшее место для отображения дочерних представлений для лучшей производительности.

Однако при предварительно отрисованном DOM вам может потребоваться отобразить дочерние представления в initialize , так как представление уже будет отрисовано.

import { View } from 'backbone.marionette';
import HeaderView from './header-view';

const MyBaseLayout = View.extend({
  regions: {
    header: '#header-region',
    content: '#content-region'
  },
  el: $('#base-layout'),
  initialize() {
   this.showChildView('header', new HeaderView());
  }
});

Управление существующим деревом представлений.

Возможно, вам понадобятся дочерние представления уже существующего DOM. Для этого вам нужно будет выполнить поиск el в дереве:

import { View } from 'backbone.marionette';
import HeaderView from './header-view';

const MyBaseLayout = View.extend({
  regions: {
    header: '#header-region',
    content: '#content-region'
  },
  el: $('#base-layout'),
  initialize() {
    this.showChildView('header', new HeaderView({
      el: this.getRegion('header').$el.contents()
    }));
  }
});

То же самое можно сделать с CollectionView:

import { CollectionView } from 'backbone.marionette';
import ItemView from './item-view';

const MyList = CollectionView.extend({
  el: $('#base-table'),
  childView: ItemView,
  childViewContainer: 'tbody',
  buildChildView(model, ChildView) {
    const index = this.collection.indexOf(model);
    const childEl = this.$('tbody').contents()[index];

    return new ChildView({
      model,
      el: childEl
    });
  }
});

const myList = new MyList({ collection: someCollection });

// Unlike `View`, `CollectionView` should be rendered to build the `children`
myList.render();

https://github.com/marionettejs/backbone.marionette/issues/3128

Переотрисовка дочерних элементов представления с существующим DOM.

Вы можете инициализировать View с существующим HTML, но если вы переотрисуете представление, как и любое другое представление, ваше представление отобразит template в el представления, а любые дочерние элементы потребуют повторного отображения.

Таким образом, ваше представление должно быть готово к обработке обоих сценариев.

import _ from 'underscore';
import { View } from 'backbone.marionette';
import HeaderView from './header-view';

const MyBaseLayout = View.extend({
  regions: {
    header: '#header-region',
    content: '#content-region'
  },
  el: $('#base-layout'),
  initialize() {
    this.showChildView('header', new HeaderView({
      el: this.getRegion('header').$el.contents()
    }));
  },
  template: _.template('<div id="header-region"></div><div id="content-region"></div>'),
  onRender() {
    this.showChildView('header', new HeaderView());
  }
});