Spec-Zone.ru › Marionette.js 3

Marionette.Behavior

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

Поведение особенно хорошо подходит для выделения общих взаимодействий с пользователем, моделью и коллекцией для использования во всем вашем приложении.

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

  • Использование поведения
    • Определение и присоединение поведения
    • Параметры поведения
    • Значения по умолчанию поведения
  • Вложение поведения
  • Прокси представления
    • Прослушивание событий представления
    • Обработчики прокси
    • События/Порядок инициализации
    • Использование ui
    • Представление и el

Использование поведения

Самый простой способ увидеть, как использовать класс Behavior, — это взять пример представления и выделить общее поведение, которое можно использовать в других представлениях.

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

var MyView = Mn.View.extend({
  ui: {
    destroy: '.destroy-btn'
  },

  events: {
    'click @ui.destroy': 'warnBeforeDestroy'
  },

  warnBeforeDestroy: function() {
    alert('You are about to destroy all your data!');
    this.destroy();
  },

  onRender: function() {
    this.ui.destroy.tooltip({
      text: 'What a nice mouse you have.'
    });
  }
});

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

Точки взаимодействия, такие как всплывающие подсказки и предупреждающие сообщения, являются общими концепциями. Нет необходимости переписывать их в ваших представлениях, поэтому они являются идеальными кандидатами для извлечения в классы Behavior.

Определение и присоединение поведения

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

var DestroyWarn = Mn.Behavior.extend({
  // You can set default options
  // just like you can in your Backbone Models.
  // They will be overridden if you pass in an option with the same key.
  defaults: {
    message: 'You are destroying!'
  },
  ui: {
    destroy: '.destroy-btn'
  },

  // Behaviors have events that are bound to the views DOM.
  events: {
    'click @ui.destroy': 'warnBeforeDestroy'
  },

  warnBeforeDestroy: function() {
    var message = this.getOption('message');
    window.alert(message);
    // Every Behavior has a hook into the
    // view that it is attached to.
    this.view.destroy();
  }
});

var ToolTip = Mn.Behavior.extend({
  defaults: {
    text: ''
  },
  ui: {
    tooltip: '.tooltip'
  },

  onRender: function() {
    this.ui.tooltip.tooltip({
      text: this.getOption('text')
    });
  }
});

Мы передали атрибут defaults, который устанавливает параметры по умолчанию. Это будет описано вскоре в параметрах по умолчанию. После выделения поведения предупреждений и всплывающих подсказок нам нужно только прикрепить их к нашему представлению:

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

var MyView = Mn.View.extend({
  behaviors: [DestroyWarn, ToolTip]
});

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

Теперь каждое поведение сможет реагировать на взаимодействия пользователя так, как если бы обработчики событий были прикреплены непосредственно к представлению. Помимо использования нотации массивов, поведение можно прикрепить с помощью объекта:

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

var MyView = Mn.View.extend({
  behaviors: {
    destroy: DestroyWarn,
    tooltip: ToolTip
  }
});

Параметры поведения

При присоединении поведения к представлениям мы также можем передать параметры, чтобы добавить их к поведению. Это, как правило, статическая информация, касающаяся того, что должно делать поведение. В нашем примере выше мы хотим переопределить сообщение для наших DestroyWarn и Tooltip поведений, чтобы оно соответствовало исходному сообщению в представлении:

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

var MyView = Mn.View.extend({
  behaviors: [
    {
      behaviorClass: DestroyWarn,
      message: 'You are about to destroy all your data!'
    },
    {
      behaviorClass: ToolTip,
      text: 'What a nice mouse you have.'
    }
  ]
});

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

Используя объект, мы должны определить атрибут behaviorClass, чтобы сослаться на наше поведение, а затем добавить любые дополнительные параметры с ключами, соответствующими параметру, который мы хотим переопределить. Любые переданные параметры будут переопределять параметры defaults.

Вот синтаксис для объявления поведения, используемого в представлении.

  • Вы можете передать поведение либо как набор пар «ключ-значение», где ключи используются для поиска класса поведения, либо как массив.
  • Параметры для каждого Behavior также передаются в Behavior во время инициализации.
  • Параметры затем хранятся в каждом Behavior в options.
var Mn = require('backbone.marionette');

var MyView = Mn.View.extend({
  ui: {
    destroy: '.destroy-btn'
  },

  behaviors: {
    DestroyWarn: {
      message: 'you are destroying all your data is now gone!'
    },
    ToolTip: {
      text: 'what a nice mouse you have'
    }
  }
});

Теперь давайте создадим DestroyWarn Behavior.

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

var DestroyWarn = Mn.Behavior.extend({
  // You can set default options
  // just like you can in your Backbone Models.
  // They will be overridden if you pass in an option with the same key.
  defaults: {
    message: 'You are destroying!'
  },

  // Behaviors have events that are bound to the views DOM.
  events: {
    'click @ui.destroy': 'warnBeforeDestroy'
  },

  warnBeforeDestroy: function() {
    alert(this.options.message);
    // Every Behavior has a hook into the
    // view that it is attached to.
    this.view.destroy();
  }
});

И перейдем к поведению Tooltip.

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

var ToolTip = Mn.Behavior.extend({
  ui: {
    tooltip: '.tooltip'
  },

  onRender: function() {
    this.ui.tooltip.tooltip({
      text: this.options.text
    });
  }
});

Значения по умолчанию поведения

Устарело: Значения по умолчанию можно эффективно задать с помощью хеша options , определенного в поведении.

Marionette.Behavior.extend({
  options: function() {
    return {
      deepSpace: 9
    }
  }
});

Marionette.Behavior.extend({
  options: {
    dominion: 'invasion',
    doge: 'amaze'
  }
});

defaults может быть hash или function, чтобы определить параметры по умолчанию для вашего Behavior. Параметры по умолчанию будут переопределены в зависимости от того, что вы установили в качестве параметров для Behavior. (Это работает так же, как и Backbone.Model).

Marionette.Behavior.extend({
  defaults: function() {
    return {
      'deepSpace': 9
    }
  }
});

Marionette.Behavior.extend({
  defaults: {
    'dominion': 'invasion',
    'doge': 'amaze'
  }
});

view

view — это ссылка на экземпляр View, к которому прикреплено Behavior.

Marionette.Behavior.extend({
  handleDestroyClick: function() {
    this.view.destroy();
  }
});

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

Вложение поведения

Помимо расширения View с Behavior, Behavior может использовать другие поведения. Синтаксис идентичен тому, который используется для View:

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

var Modal = Mn.Behavior.extend({
  behaviors: {
    DestroyWarn: {
      message: 'Whoa! You sure about this?'
    }
  }
});

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

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

Прокси представления

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

Прослушивание событий представления

Поведение управляется прокси событий. Это означает, что любые события, которые сгенерированы в View , передаются всем прикрепленным behaviors . Это включает:

  • События, сгенерированные triggerMethod
  • События, сгенерированные от triggers
  • События, сгенерированные childViewTriggers
  • События, сгенерированные от childView

Эти обработчики работают точно так же, как и в View - см. документацию View

События, сгенерированные в экземпляре поведения, не выполняются в представлении. Чтобы уведомить представление, поведение должно сгенерировать событие в свойстве view, например, this.view.trigger('my:event')

Обработчики прокси

Поведения предоставляют прокси к ряду атрибутов обработки событий представлений, включая:

  • events
  • triggers
  • modelEvents
  • collectionEvents

События/Порядок инициализации

Если и представление, и поведение прослушивают одно и то же событие, это будет выполнено сначала в представлении, а затем в поведении, как показано ниже.

Процесс инициализации представления + поведения следующий:

  1. Создается представление
  2. Создается поведение
  3. Поведение инициализируется со свойством view
  4. Инициализируется представление
  5. Представление генерирует событие initialize в поведении.

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

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

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

Как и в представлениях, events и triggers могут использовать ссылки ui в своих обработчиках. Дополнительные сведения см. в ui документации по представлениям. Эти ссылки могут быть определены либо в поведении, либо в представлении:

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

var MyBehavior = Mn.Behavior.extend({
  ui: {
    saveForm: '.btn-save'
  },

  events: {
    'click @ui.saveForm': 'saveForm'
  },

  modelEvents: {
    invalid: 'showError'
  },

  saveForm: function() {
    this.view.model.save();
  },

  showError: function() {
    alert('You have errors');
  }
});

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

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

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

var MyBehavior = Mn.Behavior.extend({
  ui: {
    saveForm: '.btn-save'
  },

  events: {
    'click @ui.saveForm': 'saveForm'  // .btn-save
  },

  saveForm: function() {
    this.view.model.save();
  }
});

var FirstView = Mn.View.extend({
  behaviors: [MyBehavior],

  ui: {
    saveForm: '.btn-primary'
  },

  events: {
    'click @ui.saveForm': 'checkForm'  // .btn-primary
  },

  checkForm: function() {
    // ...
  }
});

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

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

У Behavior есть ряд прокси-атрибутов, которые напрямую ссылаются на соответствующий атрибут в представлении:

  • $
  • el
  • $el

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

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

var ViewBehavior = Mn.Behavior.extend({
  onRender: function() {
    if (this.view.model.get('selected')) {
      this.$el.addClass('highlight');
    }
    else {
      this.$el.removeClass('highlight');
    }
  }
});

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

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

Spec-Zone.ru

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