Общие концепции Marionette

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

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

• Использование ES6 модулей
• Наследование на основе классов
  • Атрибуты с значениями
  • Функции, возвращающие значения
  • Связывание атрибутов при создании экземпляра
• Общие функциональные возможности Marionette

Использование ES6 модулей

Marionette всё ещё поддерживает использование библиотеки через встроенный скрипт.

<script src="./backbone.marionette.js"></script>
<script>new Marionette.View({ el: 'body' });</script>

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

import { View } from 'backbone.marionette';
import * as Mn from 'backbone.marionette';

new View({ el: 'body' });
new Mn.Application();

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

import Marionette from 'backbone.marionette';

new Marionette.Application();

Наследование на основе классов

Как и в Backbone, Marionette использует функцию _.extend для моделирования наследования на основе классов. Все встроенные классы, такие как Marionette.View, Marionette.MnObject и всё, что расширяет их, предоставляют метод extend для этой цели.

В примере ниже мы создаём новый псевдокласс под названием MyView.

import { View } from 'backbone.marionette';

const MyView = View.extend({});

Теперь вы можете создавать экземпляры MyView с помощью ключевого слова JavaScript new.

const view = new MyView();

Атрибуты с значениями

При расширении классов мы можем предоставить атрибуты класса со специфическими значениями, определив их в объекте, который мы передаём в качестве параметра extend.

import { View } from 'backbone.marionette';

const MyView = View.extend({
  className: 'bg-success',

  template: '#template-identifier',

  regions: {
    myRegion: '.my-region'
  },

  modelEvents: {
    change: 'removeBackground'
  },

  removeBackground() {
    this.$el.removeClass('bg-success');
  }
});

Пример вживую

Когда мы создаём экземпляр MyView, каждый экземпляр получит класс .bg-success, с областью myRegion, созданной на элементе .my-region.

Функции, возвращающие значения

Практически в каждом случае, где мы можем установить значение, мы также можем назначить функцию для определения значения во время выполнения. В этом случае Marionette выполнит функцию при создании экземпляра и использует возвращённое значение:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  className() {
    return this.model.successful() ? 'bg-success' : 'bg-error';
  },

  template: '#template-identifier',

  regions() {
    return {
      myRegion: '.my-region'
    };
  },

  modelEvents() {
    const wasSuccessful = this.model.successful();
    return {
      change: wasSuccessful ? 'removeBackground' : 'alert'
    };
  },

  removeBackground() {
    this.$el.removeClass('bg-success');
  },

  alert() {
    console.log('model changed');
  }
});

Пример вживую

Как мы видим, практически все атрибуты здесь можно вычислить динамически. В большинстве случаев Marionette вызовет функцию один раз при создании экземпляра или первом рендеринге и сохранит значение на протяжении всего жизненного цикла представления. Есть некоторые исключения из этого правила — они будут упомянуты в соответствующей документации.

Контекст функции

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

Связывание атрибутов при создании экземпляра

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

import { View } from 'backbone.marionette';

const MyView = View.extend({
  template: '#template-identifier'
});

const myView = new MyView({
  triggers: {
    'click a': 'show:link'
  }
});

Это установит триггер под названием show:link, который будет срабатывать всякий раз, когда пользователь нажимает на <a> внутри представления.

Опции, установленные здесь, переопределят опции, установленные при определении класса. Например:

import { View } from 'backbone.marionette';

const MyView = View.extend({
  template: '#template-identifier',

  triggers: {
    'click @ui.save': 'save:form'
  }
});

const myView = new MyView({
  triggers: {
    'click a': 'show:link'
  }
});

В этом примере триггер для save:form больше не будет срабатывать, так как триггер для show:link полностью его переопределяет.

Установка опций

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

import { View } from 'backbone.marionette';

const MyView = View.extend({
  checkOption() {
    console.log(this.getOption('foo'));
  }
});

const view = new MyView({
  foo: 'some text'
});

view.checkOption();  // prints 'some text'

Пример вживую

Общие функциональные возможности Marionette

Marionette имеет несколько методов и основных функциональных возможностей, общих для всех классов.

Продолжить чтение....