What's new in Marionette.js 3.0?

More than 2 years have passed since that time as the 3rd version began to be developed and finally today it was released! So, who cares, who waited and works with Marionette.js - welcome to the tackle.
The guys from the core team did a very good job and added a couple of good changes.
Let's start.

View

Marionette.View has visibly transformed. Now this is not just an unused class, as we recall from the version 2 documentation.

Note: The Marionette.View class is not intended to be used directly

and full View.

Moreover, it now contains both Marionette.View , and Marionette.ItemView and Marionette.LayoutView . Yes, as you understand, now we no longer have Marionette.ItemView or Marionette.LayoutView , they have been deleted. In order to use the 3rd version in the code, you just need to replace your Marionette.ItemView and Marionette.LayoutView with Marionette.View and that's it.

Let's look at a small example:

 import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ template: _.template('<h1>   3- </h1>'), onRender() { console.log('   ') } }); 

Living example

And an example of how to use View as a LayoutView

 import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ regions: { region1:'#region1', region2: '#region2' }, onRender() { this.showChildView('region1', childView1); this.showChildView('region2', childView2); } }); 

Living example

With this sorted out. Go ahead.

CompositeView

Marionette.CompositeView has become deprecated which causes many questions at once. How do I now create a table or tree menu as recommended in the documentation? It's very simple, for this you need to use Marionette.View and Marionette.CollectionView . The guys have prepared good comparative examples for both tables and for tree-like menus .

By the way, the documentation for the new version has improved markedly. Scott Walton , who is also the author of the Marionette Guides , did a good job on it.

Collectionview

Marionette.CollectionView remained largely unchanged. The getChildView and getEmptyView have been removed. Instead, you can do so

 Mn.CollectionView({ childView() { //   }, emptyView() { //   } }); 

Also, Backbone.BabySitter removed from dependencies and fully integrated into the core of the framework. Now let's just refresh the memory with a small example.

 import Mn from 'backbone.marionette'; const data = [ { item: ' ' }, { item: ' ' }, { item: ' ' } ]; const collection = new Backbone.Collection(data); const childViewTemplate = _.template('<%= item %>'); const ChildView = Mn.View.extend({ template: childViewTemplate }); const collectionView = new Mn.CollectionView({ el: 'body', childView: ChildView, collection: collection }); collectionView.render(); 

Living example

View.Events

The life cycle of the View has changed. The before:show and show events have been removed. Now it looks like this:

 before:render -> render -> before:attach -> attach -> dome:refresh before:detach -> detach -> before:destroy -> destroy 

Example

 import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ template: false, onBeforeRender() { console.log(1) }, onRender() { console.log(2) }, onbeforeDestroy() { console.log(3) }, onDestroy() { console.log(4); } }); const myView = new MyView(); myView.render(); myView.destroy(); 

Living example

ChildView Events

The API has changed a bit and now instead of childEvents you need to use childViewEvents .

 import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ childViewEvents: { 'some:event': 'eventHandler' } eventHandler() { console.log('  '); } }); 

Living example

Templates

templateHelpers been renamed to templateContext .

 import Mn from 'backbone.marionette'; const MyView = Mn.View.extend({ template: template, templateContext() { return { version: '3.0' } } }); 

Living example

Backbone.Radio

Backbone.Wreqr replaced by Backbone.Radio - a powerful library for communication between modules in the application.
Backbone.Radio tightly integrated into Marionette.Object which makes it possible to listen to all the events of the application in one place.

Living example

API changes

  - `bindEntityEvents` -> `bindEvents` - `unbindEntityEvents ` -> `unbindEvents` - `normalizeUIString`, `normalizeUIKeys`, `normalizeUIValues` -> `normalizeMethods` - `proxyGetOption` -> `getOption` - `proxyBindEntityEvents` -> `bindEvents` - `proxyUnbindEntityEvents` -> `unbindEvents` 

What was removed?

• Marionette.Controller
• Marionette.Module
• Marionette.RegionManager

Moving to the new version should not be very painful.
Here are the commits of one of the leaders of the Paul Falgout team in one of their projects:

 templateHelpers -> templateContext Marionette.ItemView -> Marionette.View Marionette.LayoutView -> Marionette.View childEvents -> childViewEvents render:collection / onRenderCollection -> render:children / onRenderChildren before:show / show / onBeforeShow / onShow -> attach etc 

To make life easier for developers, a babliotek marionette-v3-compat was created.
There are also examples of the third version with different collectors of projects.

Marionette.js github repository