Marionette.Behavior

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

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

• Мотивация
• Использование Behaviors
• API
  • Проксирование событий
  • Триггеры
  • События модели
  • События коллекции
  • Группированные Behaviors
  • $
  • $el и el
  • Значения по умолчанию
  • Представление

Мотивация

По мере создания всё более сложных представлений (Views), вы обнаружите, что ваш View всё меньше посвящён отображению данных модели и всё больше – взаимодействию.

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

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

Вот пример простого ItemView. Давайте попробуем упростить его и абстрагировать Behaviors из него.

var MyView = Marionette.ItemView.extend({
  ui: {
    "destroy": ".destroy-btn"
  },

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

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

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

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

Вот синтаксис для объявления используемых в представлении (View) behaviors:

• Ключи в хеше передаются в getBehaviorClass, который ищет соответствующий класс Behavior.
• Опции для каждого Behavior также передаются в Behavior во время инициализации.
• Затем опции хранятся в каждом Behavior под options.

var MyView = Marionette.ItemView.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 DestroyWarn = Marionette.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();
  }
});

И перейдём к behaviour Tooltip.

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

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

Наконец, пользователь должен определить место хранения своих Behaviors. Вот простой пример:

  Marionette.Behaviors.behaviorsLookup = function() {
      return window.Behaviors;
  }

В этом примере вы бы хранили свои Behaviors так:

window.Behaviors.ToolTip = ToolTip;
window.Behaviors.DestroyWarn = DestroyWarn;

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

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

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

API

Проксирование событий

Behaviors работают с помощью проксирования событий. Это означает, что все события, которые запускаются функцией представления (View) triggerMethod, передаются каждому Behavior в View.

В качестве реального примера, всякий раз, когда вы определяете событие клика в хеше View вашего представления (View) events, вы можете определить те же обработчики событий и обратные вызовы в хеше Behavior вашего behavior events. То же самое относится к modelEvents и collectionEvents. Подумайте о вашем Behavior как о получателе всех событий вашего экземпляра View.

Эта концепция также позволяет реализовать неплохой декомпозированный способ связи с Behaviors из вашего экземпляра View . Вы можете просто вызвать следующее изнутри вашего View: this.triggerMethod("SomeEvent", {some: "data"}). Затем ваш класс Behavior будет выглядеть так:

Marionette.Behavior.extend({
  onSomeEvent: function(data) {
        console.log("wow such data", data);
    }
});

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

modelEvents будет реагировать на события модели View.

  Marionette.Behavior.extend({
    modelEvents: {
      "change:doge": "onDogeChange"
    },

    onDogeChange: function() {
      // buy more doge...
    }
  });

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

collectionEvents будет реагировать на события коллекции View.

  Marionette.Behavior.extend({
    collectionEvents: {
      add: "onCollectionAdd"
    },

    onCollectionAdd: function() {
    }
  });

Методы жизненного цикла

Помимо предоставления тех же хешей событий, что и у представлений (Views), Behaviors позволяют использовать те же функции жизненного цикла, что и у представлений. Это означает, что методы, такие как initialize, onRender, onBeforeShow, и onBeforeDestroy, все являются допустимыми, при условии, что View , реализующая Behavior, запускает соответствующие события.

  Marionette.Behavior.extend({

    onRender: function() {
        //Apply a jQuery plugin to every .foo item within the view
        this.$('.foo').bar();
    }
  });

Триггеры

Любые triggers , которые вы определите в Behavior, будут вызываться в ответ на соответствующее событие в View.

Marionette.Behavior.extend({
  triggers: {
    'click .label': 'click:label'
  }
});

Группированные Behaviors

Ключ behaviors позволяет Behavior группировать несколько behaviors вместе.

  Marionette.Behavior.extend({
    behaviors: {
      SomeBehavior: {}
    }
  });

$

$ – это прямой прокси метода поиска View по $.

    Marionette.Behavior.extend({
        onShow: function() {
            this.$('.zerg')
        }
    });

$el и el

el – это прямой прокси метода View по el. Аналогично, $el – это прямой прокси кэшированного в качестве селектора jQuery метода View по el.

Marionette.Behavior.extend({
    onShow: function() {
        this.$el.fadeOut('slow')
    }
});

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

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 , к которому прикреплён Behavior.

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

ui

Behaviors могут иметь свой собственный хеш ui, который будет смешан в хеш ui связанного экземпляра View . Элементы ui, определённые в Behavior или View, будут доступны в событиях и триггерах. Они также напрямую прикреплены к Behavior и могут быть доступны в методах Behavior как this.ui.

Marionette.Behavior.extend({
    ui: {
        'foo' : 'li.foo'
    },

    doStuff: function() {
        this.ui.foo.trigger('something');
    }
})