Backbone.Marionette is a composite application library for Backbone.js that simplifies the construction of large-scale JavaScript applications. It provides an application architecture on top of Backbone's building blocks, including built-in view management, memory management, and event-driven architecture using Backbone.Radio.
npm install backbone.marionetteESM import:
import { View, CollectionView, Region, Application, MnObject, Behavior, bindEvents, unbindEvents } from "backbone.marionette";Utility imports:
import {
bindEvents, unbindEvents, bindRequests, unbindRequests,
mergeOptions, getOption, triggerMethod, normalizeMethods,
setDomApi, setRenderer, isEnabled, setEnabled, monitorViewEvents
} from "backbone.marionette";Default import:
import Marionette from "backbone.marionette";
const { View, CollectionView, Region, Application } = Marionette;CommonJS:
const Marionette = require("backbone.marionette");
const { View, CollectionView, Region, Application } = Marionette;Creating and managing views with regions:
import { View, Region, Application } from "backbone.marionette";
// Create a basic view
class MyView extends View {
template() {
return '<h1>Hello World!</h1><div id="child-region"></div>';
}
regions() {
return {
childRegion: '#child-region'
};
}
}
// Create and show a view
const view = new MyView();
const region = new Region({ el: '#app' });
region.show(view);
// Show child view in a region
const childView = new View({ template: () => '<p>Child content</p>' });
view.showChildView('childRegion', childView);Working with collections:
import { CollectionView, View } from "backbone.marionette";
import { Collection } from "backbone";
// Define child view for collection items
class ItemView extends View {
template(data) {
return `<li>${data.name}</li>`;
}
tagName: 'li'
}
// Create collection view
class ListView extends CollectionView {
tagName: 'ul'
childView: ItemView
}
// Use with collection
const collection = new Collection([
{ name: 'Item 1' },
{ name: 'Item 2' }
]);
const listView = new ListView({ collection });
region.show(listView);Backbone.Marionette is built around several key components:
Core view functionality with template rendering, UI element binding, and lifecycle management. Perfect for creating reusable view components.
class View extends Backbone.View {
constructor(options?: ViewOptions): View;
render(): this;
destroy(options?: DestroyOptions): this;
isDestroyed(): boolean;
isRendered(): boolean;
isAttached(): boolean;
}
interface ViewOptions {
behaviors?: BehaviorHash;
template?: TemplateFunction | string;
templateContext?: object | (() => object);
ui?: UIHash;
events?: EventsHash;
triggers?: TriggersHash;
regions?: RegionsHash;
modelEvents?: EventsHash;
collectionEvents?: EventsHash;
}Specialized views for rendering collections of models with automatic child view management, filtering, and sorting capabilities.
class CollectionView extends Backbone.View {
constructor(options?: CollectionViewOptions): CollectionView;
render(): this;
isEmpty(): boolean;
addChildView(view: View, index?: number, options?: object): this;
removeChildView(view: View, options?: object): this;
}
interface CollectionViewOptions extends ViewOptions {
childView?: ViewClass;
childViewOptions?: object | (() => object);
emptyView?: ViewClass;
emptyViewOptions?: object | (() => object);
viewFilter?: (child: Model, index: number) => boolean;
viewComparator?: string | ((view: View) => any) | ((view1: View, view2: View) => number);
}View lifecycle management within DOM containers, handling view showing, hiding, and cleanup automatically.
class Region {
constructor(options?: RegionOptions): Region;
show(view: View, options?: ShowOptions): this;
empty(options?: EmptyOptions): this;
hasView(): boolean;
destroy(options?: DestroyOptions): this;
}
interface RegionOptions {
el?: string | Element;
parentEl?: string | Element;
replaceElement?: boolean;
allowMissingEl?: boolean;
}Base object classes and application management for organizing global application state and functionality.
const MnObject: {
new (options?: MnObjectOptions): MnObject;
extend(properties: object, classProperties?: object): typeof MnObject;
};
class Application extends MnObject {
constructor(options?: ApplicationOptions): Application;
start(options?: object): this;
getRegion(): Region;
showView(view: View, ...args: any[]): this;
}Reusable functionality system for views, allowing shared behavior patterns across different view types.
const Behavior: {
new (options?: BehaviorOptions, view?: View): Behavior;
extend(properties: object, classProperties?: object): typeof Behavior;
};
interface BehaviorOptions {
ui?: UIHash;
events?: EventsHash;
triggers?: TriggersHash;
modelEvents?: EventsHash;
collectionEvents?: EventsHash;
}Utility functions for event binding, option merging, and global configuration of DOM APIs and template renderers.
function bindEvents(entity: EventsEntity, bindings: EventsHash): void;
function unbindEvents(entity: EventsEntity, bindings: EventsHash): void;
function bindRequests(channel: RadioChannel, bindings: RequestsHash): void;
function unbindRequests(channel: RadioChannel, bindings: RequestsHash): void;
function mergeOptions(options: object, keys: string[]): void;
function getOption(optionName: string): any;
function normalizeMethods(hash: MethodsHash): NormalizedMethodsHash;
function triggerMethod(event: string, ...args: any[]): any;
function setDomApi(mixin: DomApiMixin): void;
function setRenderer(renderer: RendererFunction): void;
function isEnabled(name: string): boolean;
function setEnabled(name: string, state: boolean): void;
function monitorViewEvents(view: View): void;
const extend: (protoProps: object, staticProps?: object) => Function;
const Events: EventsMixin;
const VERSION: string;interface EventsHash {
[eventName: string]: string | ((...args: any[]) => any);
}
interface UIHash {
[name: string]: string;
}
interface RegionsHash {
[name: string]: string | RegionDefinition;
}
interface RegionDefinition {
el: string;
regionClass?: typeof Region;
replaceElement?: boolean;
}
type TemplateFunction = (data?: object) => string;
interface DestroyOptions {
checkForEmpty?: boolean;
}
interface ShowOptions {
forceShow?: boolean;
preventDestroy?: boolean;
}
interface EventsEntity {
on(event: string, callback: Function): void;
off(event?: string, callback?: Function): void;
trigger(event: string, ...args: any[]): void;
}
interface RadioChannel {
request(requestName: string, ...args: any[]): any;
trigger(eventName: string, ...args: any[]): void;
reply(requestName: string, handler: Function): void;
replyOnce(requestName: string, handler: Function): void;
stopReplying(requestName?: string): void;
}
interface RequestsHash {
[requestName: string]: string | Function;
}
interface MethodsHash {
[key: string]: string | Function;
}
interface NormalizedMethodsHash {
[key: string]: Function;
}
interface EventsMixin {
on(eventName: string, callback: Function): this;
off(eventName?: string, callback?: Function): this;
trigger(eventName: string, ...args: any[]): this;
once(eventName: string, callback: Function): this;
listenTo(other: any, eventName: string, callback: Function): this;
stopListening(other?: any, eventName?: string, callback?: Function): this;
}