Spec-Zone.ru › Marionette.js 3

Marionette.View

A View is a view that represents an item to be displayed with a template. This is typically a Backbone.Model, Backbone.Collection, or nothing at all.

Views are also used to build up your application hierarchy - you can easily nest multiple views through the regions attribute.

Note: From Marionette v3.x, Marionette.View replaces Marionette.LayoutView and Marionette.ItemView.

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

  • Отрисовка шаблона
    • Настройка привязки шаблона к el
  • Управление существующей страницей
    • Указание шаблона как template в значении false
  • Размещение представлений - области
    • Управление дочерними представлениями
      • Отображение представления
      • Доступ к дочернему представлению
      • Открепление дочернего представления
    • Доступность областей
    • Эффективные вложенные структуры представлений
    • Прослушивание событий дочерних элементов
  • Организация вашего представления
    • Определение ui
    • Доступ к элементам пользовательского интерфейса
      • Ссылка на элементы пользовательского интерфейса в events и triggers
  • События
    • Обработчики событий onEvent
    • События жизненного цикла
    • Привязка к вводу пользователя
      • Сопоставление событий и триггеров
      • События представления events
      • Триггеры представления triggers
      • Объект события триггеров представления triggers
  • События моделей и коллекций
    • События моделей
      • Функциональный обратный вызов
    • События коллекций
    • Прослушивание обоих

Отрисовка шаблона

Представление Marionette реализует мощный метод render, который, используя шаблон, создаст ваш HTML на основе этого шаблона, объединяя информацию модели и дополнительный контекст шаблона.

Переопределение render Если вы хотите добавить дополнительное поведение к методу render вашего представления, лучше всего реализовать логику в обработчиках onBeforeRender или onRender.

Чтобы отрисовать шаблон, установите атрибут template в вашем представлении:

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

var MyView = Mn.View.extend({
  tagName: 'h1',
  template: _.template('Contents')
});

var myView = new MyView();
myView.render();

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

Для более подробной информации об отрисовке шаблонов, см. документацию по шаблонам.

Настройка привязки шаблона к el

Переопределите метод attachElContent представления, чтобы изменить способ привязки отрисованного шаблона к el представления. Этот метод принимает один параметр - отрисованный HTML.

Стандартная реализация attachElContent:

attachElContent(html) {
  this.$el.html(html);

  return this;
},

Управление существующей страницей

Marionette умеет управлять предопределенными страницами - статическими или сгенерированными на сервере - и обрабатывать их так, как будто они были сгенерированы с помощью Marionette.

Чтобы использовать существующую страницу, установите значение el в соответствии с существующим элементом DOM:

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

var MyView = Mn.View({
  el: '#base-element'
});

new myView();
myView.isRendered(); // true if '#base-element` exists
myView.isAttached(); // true if '#base-element` is in the DOM

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

Marionette будет устанавливать соответствующее состояние представления.

Указание шаблона как template в значении false

Устаревшее: template: false устарело. Используйте template: _.noop для отрисовки без добавления HTML или не отрисовывайте представление. Предварительно отрисованные представления создают isRendered() === true.

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

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

var MyView = Mn.View({
  el: '#base-element',

  // template: false is deprecated
  // Use template: _.noop instead
  template: false
});

new myView();
myView.render();

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

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

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

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

Области можно добавить в представление при определении класса с помощью regions, или во время выполнения с помощью addRegion.

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

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

var MyView = Mn.View.extend({
  template: '#tpl-view-with-regions',

  regions: {
    firstRegion: '#first-region',
    secondRegion: '#second-region'
  }
});

Если у нас есть следующий шаблон:

<script type="x-template/underscore" id="tpl-view-with-regions">
  <div id="first-region"></div>
  <div id="second-region"></div>
  <div id="third-region"></div>
</script>

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

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

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

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

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

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

var Mn = require('backbone.marionette');
var SubView = require('./subview');

var MyView = Mn.View.extend({
  template: '#tpl-view-with-regions',

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

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

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

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

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

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

var Mn = require('backbone.marionette');
var SubView = require('./subview');

var MyView = Mn.View.extend({
  template: '#tpl-view-with-regions',

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

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

  onSomeEvent: function() {
    var first = this.getChildView('firstRegion');
    first.doSomething();
  }
});

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

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

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

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

var Mn = require('backbone.marionette');
var SubView = require('./subview');

var MyView = Mn.View.extend({
  template: '#tpl-view-with-regions',

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

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

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

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

Доступность областей

Любые определенные области в View будут доступны View или любому вызывающему коду сразу после создания View. Это позволяет привязать представление к существующему элементу DOM в HTML-странице без необходимости вызывать метод render или что-либо еще, чтобы создать области.

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

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

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

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

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

var ParentView = Mn.View.extend({
  onRender: function() {
    this.showChildView('header', new HeaderView());
    this.showChildView('footer', new FooterView());
  }
});

myRegion.show(new ParentView(), options);

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

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

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

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

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

Организация вашего представления

View предоставляет механизм для именования частей вашего шаблона, используемых во всем представлении с помощью атрибута ui . Это предоставляет ряд преимуществ:

  1. Предоставление ссылки на часто используемые элементы пользовательского интерфейса
  2. Кэширование селектора jQuery
  3. Изменение селектора позже только в одном месте в вашем представлении

Определение ui

Чтобы определить свой хэш ui, просто установите объект с ключами к селекторам jQuery в атрибут ui вашего представления:

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

var MyView = Mn.View.extend({
  template: '#my-template',
  ui: {
    save: '#save-button',
    close: '.close-button'
  }
});

Внутри вашего представления ссылки save и close будут указывать на селекторы jQuery #save-button и .close-button соответственно.

Доступ к элементам пользовательского интерфейса

Чтобы получить доступ к элементам пользовательского интерфейса, используйте метод getUI(ui):

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

var MyView = Mn.View.extend({
  template: '#my-template',
  ui: {
    save: '#save-button',
    close: '.close-button'
  },

  onDoSomething: function() {
    var saveButton = this.getUI('save');
    saveButton.addClass('disabled');
    saveButton.attr('disabled', 'disabled');
  }
});

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

Поскольку saveButton здесь является селектором jQuery, вы можете вызывать любые методы jQuery на нем в соответствии с документацией jQuery.

Ссылка на элементы пользовательского интерфейса в events и triggers

Атрибут UI особенно полезен при установке обработчиков в объектах events и triggers - просто используйте префикс @ui.:

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

var MyView = Mn.View.extend({
  template: '#my-template',
  ui: {
    save: '#save-button',
    close: '.close-button'
  },

  events: {
    'click @ui.save': 'handleSave'
  },

  triggers: {
    'click @ui.close': 'close:view'
  },

  handleSave: function() {
    this.model.save();
  }
});

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

В этом примере, когда пользователь нажимает на #save-button, вызывается handleSave. Если пользователь нажимает на .close-button, тогда событие close:view будет отправлено на MyView.

Используя префикс @ui, мы можем изменить базовый шаблон, не просматривая наше представление в каждом месте, где ссылаемся на этот селектор - достаточно обновить объект ui.

События

Выполнение событий на представлениях позволяет сообщать о том, что что-то произошло на этом представлении, и позволяет ему решить, следует ли на это реагировать.

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

  1. Обычный способ Backbone: view.on('render', function() {})
  2. Переопределение методов обработчиков событий onEvent: onRender: function() {}

Обработчики событий onEvent

Marionette создает обработчики событий onEvent для всех событий, сгенерированных с помощью view.triggerMethod('event') — если существует метод onEvent, Marionette вызовет его за вас. Пример:

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

var MyView = Mn.View.extend({
  onRender: function() {
    console.log("Fired whenever view.triggerMethod('render') is called.");
  },

  onOtherEvent: function(argument) {
    console.log("Fired other:event with '" + argument + "' as an argument");
  }
});

var view = new MyView();

view.triggerMethod('other:event', 'test argument');

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

Это отобразит в консоли: Fired other:event with 'test argument' as an argument

Чтобы настроить обработчики событий, см. правила в Документации по событиям.

События жизненного цикла

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

Привязка к вводу пользователя

Представления могут привязывать пользовательские события всякий раз, когда пользователи взаимодействуют с DOM. Используя обработчики представлений events и triggers, мы можем либо напрямую привязать пользовательский ввод к действию, либо сгенерировать общее событие, которое может быть или не быть обработано.

Сопоставление событий и триггеров

Атрибуты events и triggers привязывают события DOM к действиям, которые нужно выполнить в представлении. Каждый из них принимает ключ события DOM и сопоставление с обработчиком.

Рассмотрим простой пример:

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

var MyView = Mn.View.extend({
  events: {
    'drop': 'coversEntireElement',
    'click a': 'showModal',
    'click @ui.save': 'saveForm'
  },

  triggers: {
    'click @ui.close': 'cancel:entry'
  },

  ui: {
    save: '.btn-save',
    close: '.btn-cancel'
  },

  showModal: function() {
    console.log('Show the modal');
  },

  saveForm: function() {
    console.log('Save the form');
  }
  coversEntireElement: function() {
    console.log('Handle a drop event anywhere in the element');
  }
});

Обработчики событий создаются следующим образом:

'<dom event> [dom node]': 'listener'

dom event может быть событием DOM jQuery, например, click, или другим пользовательским событием, например, show.bs.modal Bootstrap.

dom node представляет собой селектор jQuery или ключ ui , префикс которого @.. Он должен существовать внутри представления после завершения отрисовки. dom node необязательно, и если он опущен, в качестве селектора будет использоваться $el представления. Дополнительную информацию об объекте ui и его работе см. в документации по UI.

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

Атрибут представления events привязывает события DOM к функциям или методам в представлении. Самый простой способ — сослаться на метод в представлении:

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

var MyView = Mn.View.extend({
  events: {
    'click a': 'showModal'
  },

  showModal: function(event) {
    console.log('Show the modal');
  }
});

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

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

При передаче ссылки на метод, метод должен существовать в представлении.

Атрибут events также может напрямую привязывать функции:

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

var MyView = Mn.View.extend({
  events: {
    'click a': function(event) {
      console.log('Show the modal');
    }
  }
});

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

Как и при передаче строковой ссылки на метод представления, атрибут events передает event в качестве аргумента вызываемой функции.

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

Атрибут представления triggers привязывает события DOM к событиям представления Marionette, на которые можно реагировать на уровне представления или родительского уровня. Дополнительную информацию о событиях см. в документации по событиям. Этот раздел будет описывать только то, как привязать эти события к представлениям.

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

var MyView = Mn.View.extend({
  triggers: {
    'click a': 'link:clicked'
  },

  onLinkClicked: function(view, event) {
    console.log('Show the modal');
  }
});

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

При нажатии тега a здесь генерируется событие link:click. На это событие можно подписаться с помощью техники onEvent привязки, описанной в документации по событиям.

Основное преимущество атрибута triggers по сравнению с events заключается в том, что сгенерированные события могут подниматься к любым родительским представлениям. Полное описание событий, распространяющихся по ветвям, и прослушивания событий дочерних элементов см. в документации по распространению событий.

Объект события представления triggers

Обработчики событий получат представление, инициировавшее событие, в качестве первого аргумента, а объект события DOM — в качестве второго. Настоятельно рекомендуется, чтобы представления обрабатывали свои собственные объекты событий DOM. Следует считать лучшей практикой не использовать события DOM в внешних обработчиках.

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

var MyView = Mn.View.extend({
  triggers: {
    'click a': {
      event: 'link:clicked',
      preventDefault: true, // this param is optional and will default to true
      stopPropagation: false
    }
  }
});

Поведение по умолчанию при вызове preventDefault можно изменить с помощью флага функции triggersPreventDefault, а stopPropagation можно изменить с помощью флага функции triggersStopPropagation.

События моделей и коллекций

Представление Marionette может подписываться на события, возникающие в прикрепленных моделях и коллекциях — это включает как стандартные события Backbone, так и пользовательские события.

События моделей

Например, чтобы прослушать события модели:

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

var MyView = Mn.View.extend({
  modelEvents: {
    'change:attribute': 'actOnChange'
  },

  actOnChange: function(model, value) {
    console.log('New value: ' + value);
  }
});

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

Атрибут modelEvents передает все аргументы, передаваемые model.trigger('event', arguments).

Атрибут modelEvents также может принимать функцию, возвращающую объект.

Функциональное обратное вызов

Вы также можете напрямую привязать функцию обратного вызова в атрибуте modelEvents. 

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

var MyView = Mn.View.extend({
  modelEvents: {
    'change:attribute': function() {
      console.log('attribute was changed');
    }
  }
})

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

События коллекций

События коллекций работают точно так же, как modelEvents с собственным ключом collectionEvents. 

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

var MyView = Mn.View.extend({
  collectionEvents: {
    sync: 'actOnSync'
  },

  actOnSync: function(collection) {
    console.log('Collection was synchronised with the server');
  }
});

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

Атрибут collectionEvents также может принимать функцию, возвращающую объект.

Как и в modelEvents, вы можете напрямую привязать функции обратного вызова внутри объекта collectionEvents. 

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

var MyView = Mn.View.extend({
  collectionEvents: {
    'update': function() {
      console.log('the collection was updated');
    }
  }
});

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

Прослушивание обоих

Если у представления прикреплены model и collection, оно будет прослушивать события обоих:

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

var MyView = Mn.View.extend({
  modelEvents: {
    'change:someattribute': 'changeMyAttribute'
  },

  collectionEvents: {
    update: 'modelsChanged'
  },

  changeMyAttribute: function() {
    console.log('someattribute was changed');
  },

  modelsChanged: function() {
    console.log('models were added or removed in the collection');
  }
});

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

В этом случае Marionette привяжет обработчики событий к обоим.

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

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

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

var MyView = Mn.View.extend({
  onDestroy: function() {
    console.log("Fired whenever view.destroy() is called.");
  },
});

var myView = new MyView();
myView.destroy();

© 2017 Muted Solutions, LLC
Licensed under the MIT License.
https://marionettejs.com/docs/v3.5.1/marionette.view.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API