Introduction to Marionette.js Behaviors

In this post you will learn about the new feature of Marionette.js - Behaviors .

Very often, we see similar controls in various elements of the interface (for example, the Delete button can be in categories, and records, and in the list of registered users ... everywhere), and each time we have to describe the processor of this button in each View, and everywhere the same.
But this is already called code duplication, and is not welcome in most of society. Therefore, the developers of Marionette.js have provided us with such a wonderful feature as Behaviors .
')
Behaviors provides an interface for isolating DOM user interaction descriptions into separate logical chunks of code. Behavior can be applied to any View any number of times.

In this article we will consider the most trivial example - the Delete button.

How are Behaviors described and where are they stored?

In order to use Behaviors, you must first tell Marionette where they are stored. This is done like this.

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

You can change the storage location.
After the necessary settings have been made, you can start creating our Behavior.

Feature Description

To create a new pattern of behavior, you need to expand Backbone.Marionette.Behavior.

 Behaviors.CloseButton=Backbone.Marionette.Behavior.extend({...}) 

How can this object be expanded? We can listen to events of a model or collection tied to the species to which this template is applied.

  Marionette.Behavior.extend({ modelEvents: { "change:doge": "onDogeChange" }, onDogeChange: function() { // buy more doge... }, collectionEvents: { add: "onCollectionAdd" }, onCollectionAdd: function() { } }); 

From View to Behavior you can transfer options. In them we can transfer anything, for example, the class of the element, when you click on which you need to delete something.
You can also listen to events of the form to which we apply it.
Note that the function context here will not be the view to which the template is applied, but the template itself. To access a view, you can use this.view. Also available are this. $ And this. $ El.

 Backbone.Marionette.Behavior.extend({ onRender:function(){ //    "render". this.view;//    this.$; //  this.view.$ this.$el; //  this.view.$el this.options; //   ,   . } }) 

If you need to predetermine any options, do so.

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

This works by analogy with defaults on models.

Create Behavior

As I said, as an example, I will use the delete button. Please note that the new behavior pattern must be a property of the object that we have indicated to the puppet as the storage.

 Behaviors.CloseButton=Backbone.Marionette.Behavior.extend({ defaults:{ 'el':'.remove-this' }, onRender:function(){ this.$el.find(this.options.el).on('click',this.close.bind(this)); }, close: function() { this.view.model.collection.remove(this.view.model); } }); 

So, we created Behavior, called it CloseButton . What is he doing? He listens to the Render event, and when it happened, hangs up the handler to click on the item. And which element? He takes it from the options. By default, this is an element with the .remove-this class, that is, such a button will completely come off

 <button class="remove-this"></button> 

After the template is prepared, you can apply it to the View.

 var ListItem=Backbone.Marionette.ItemView.extend({ behaviors: { CloseButton: { //   options. //     ,  Marionette    el  '.remove-this' } } }) var Product=Backbone.Marionette.ItemView.extend({ behaviors: { CloseButton: { el:'.delete-product' } } }) 

In the Product view, we passed Behavior with an option that overrides the item to be clicked.

So with the help of Behaviors, we avoided duplicating the code and made the world a better place.

PS If anyone is interested, I can write about sorting the CollectionView using Drag & Drop (using jQuery Sortable).