Manage and create components for your Marionette.js application
Reusable Components in Marionette
Marionette.Component is a library for creating reusable components in Marionette.js. Marionette.Component offers an opinionated, standardized approach to creating components with your Marionette views. The library exposes an API for displaying components in Marionette regions and handles the entire view lifecycle inside the region.
$ npm install marionette.component
$ bower install marionette.component
So why a separate layer? Aren't views good enough? Yes, but typically applications take two approaches to creating reusable components. Either you create a reusable view that may contain extra business logic or you create a parent object/controller that manages the lifecycle of the view. To help enforce separation of concerns, Marionette.Component handles the former by being a wrapper object for business logic. It handles the latter by being a parent object that offers a standardized API and manages the lifecycle of the view automatically, eliminating repeated view management patterns in applications.
Creating components is very simple and at minimum requires only a component definition and view class.
var MyView = MarionetteItemView;var MyComponent = MarionetteComponent;var component = ;
To display a component inside a region, call
showIn with the region instance as the argument.
var MyApp = MarionetteApplication;var app = ;var region = app;var component = ;component;componentview instanceof MyView; //=> truecomponentregion === region; //=> trueregion$eltext; //=> 'Hello World'
Remember that components are reusable, so you can instantiate them multiple times and display them in different regions.
var MyApp = MarionetteApplication;var component1 = ;var component2 = ;var component3 = ;var app = ;var regions = app;component1;component2;component3;
Components also take a model and/or collection option that will be passed along to the view.
var Foo = BackboneModel;var List = BackboneCollection;var component =model:collection:;componentmodel instanceof Foo; //=> truecomponentcollection instanceof List; //=> truecomponentmodel === componentviewmodel; //=> truecomponentcollection === componentviewcollection; //=> true
Components can capture events triggered on the view and react to them.
var MyComponent = MarionetteComponent;var component = ;component;componentview; // 'handle foo'componentview; // 'selected bar 42'
Show the component inside
region. It triggers the following events on the component:
show. With each event, it also calls the appropriate
on* method, if available (thanks to
Destroy the component and view. It will empty the region, destroy the view, and remove references to any model and collection, as well as references to the view and region. It triggers two events,
destroy, each with their respective
on* callback from
Marionette.Component inherits from Marionette.Object, so all of its methods are available too (of course,
destroy is overriden by Marionette.Component's own implementation).
The view class to be associated with the component. When calling
showIn, the component will create an instance of the view class and attach it as a
view property to the component. The component will also forward along any
collection properties to the view.
Optional object literal of view events to method handlers on the component. Please NOTE: this refers to events triggered directly on the view, NOT DOM events that the view itself might handle.
Marionette.Component is a very young project with a lot of potential. If you have any ideas or feature requests, please feel free to open a pull request or issue. For PR's, please branch off