Backbone.Component - standalone UI components for Backbone.js

In our project, we use Backbone.js as the main JS framework. Why the choice fell on him, I may still tell in one of the following posts, this time talking about something else. As is known, out of the box, Backbone offers very modest possibilities, compensating for this with maximum flexibility. Since Backbone has been around for a long time and managed to acquire a serious developer community, there are plugins or entire frameworks built over Backbone to solve many typical tasks of Backbone applications ( Backbone.Marionette , for example, is very promising, recently released Base - by the way I advise to look closely).
Nevertheless, there is one fairly common task, an adequate solution to which I haven’t yet come across: this is about creating typical autonomous UI elements. Let's say you have a date picker element in your project, to create it, you use the jQuery plugin you found in the boundless expanses of the github. With this last, everything is fine except that you need to manually pull it every time the corresponding input appears on your page, and then it is also possible to clean up the markup created by it in order to avoid further conflicts. In the end, you have to write a lot of repetitive code. This is where Backbone.Component comes in handy.

Using

The idea behind Backbone.Component is in many ways similar to web components and components in Ember.js . Each component is an isolated UI element with its own markup and logic.

Component declaration

To create your own component, you need to declare the class inherited from Backbone.Component, and override 3 methods in it:
')

Backbone.Components.MyDate = Bakcbone.Component.extend( { generate: function( ) { ... }, activate: function( ) { ... }, deactivate: function( ) { ... } } ); 

In order:

• generate is a method for creating markup. It can take any parameters you need and should return a string (generated HTML).
• activate - the activation code of the component. The method takes no parameters and does not return values. In our date example, it might look something like this:

    activate: function( ) { this.$( "input" ).datepicker( ); } 

• deactivate - the deactivation code of the component, if required. It also receives no parameters and does not return values.

Use in templates

That's all. Now in your templates you can use the following syntax to draw a component:

 <%= this.insertMyDate( ) %> 

Here it is assumed that this inside the template points to a view object. The insertMyDate method was added to the View class automatically at the time of Backbone.Component initialization (for more information about this moment, see the documentation), such methods are created for each component that you declared. All parameters passed to the insert ... method are redirected without modification to the generate method of the corresponding component.
As soon as the drawn component appears on the page, the activate method will be called for it, when it disappears from the page, it will be deactivate. Now you can use your date picker anywhere in the project without worrying about its initialization and de-initialization: all you need is to draw it in the template.

Use without drawing

Perhaps the components you are using do not have a fixed markup that could be placed in the template. For example, you have a custom scrollbar that needs to be applied to all elements with the .my-scrollbar class. In this case, you need to create a class of the MyScrollbar component without the generate method, and make the following call inside your view object (for example, the initialize method):

 this.observeMyScrollbar( ".my-scrollbar" ); 

Like the insertMyDate method in the previous example, the observeMyScrollbar method was generated automatically. At the input, it takes a CSS selector. Now, when an element with the my-scrollbar class appears on the screen, the component's activate method will be called, and if it disappears, it will be called deactivate. Recalling the method for the same selector will have no effect, so you can not worry about how many times the observe method will be called.

Installation, documentation, dependencies

Project githaba repository:
https://github.com/malroc/backbone-component
There you can find more detailed documentation.
Backbone.Component is available in Bower under the name backbone_component. If you use Bower, you can install Backbone.Component from the bash console:

 bower install backbone_component 

Or by writing backbone_component in your project dependencies.
There are only two external dependencies for the plugin: the actual Backbone and Underscore (the latter is a hard dependency for Backbone itself). jQuery / Zepto / whatever-you can still not use, but as is the case with Backbone, lose some convenient methods for working with the DOM (see the documentation).
In addition, Backbone.Component is built using MutationObserver . If you plan to support browsers in which it is not implemented (and at the moment these are all IE versions below 11), you will have to use a polyfill ( for example, well).

Feedback

Since the plugin has appeared recently, it is quite likely that it contains bugs and shortcomings. Any messages about such, and even more so pull-requests with corrections, are accepted with gratitude in the project repository. The only request: use English, respect the opensource community.
Well, of course, you can write any comments here.
That's all, thank you for your attention. I hope this plugin will help someone in his difficult task of developing complex web applications.