or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

behaviors.mdcollection-views.mdindex.mdobjects-and-application.mdregions.mdutilities.mdviews.md
tile.json

tessl/npm-backbone-marionette

The Backbone Framework - A composite application library for Backbone.js that simplifies the construction of large-scale JavaScript applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/backbone.marionette@4.1.x

To install, run

npx @tessl/cli install tessl/npm-backbone-marionette@4.1.0

index.mddocs/

Backbone.Marionette

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.

Package Information

  • Package Name: backbone.marionette
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install backbone.marionette

Core Imports

ESM 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;

Basic Usage

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);

Architecture

Backbone.Marionette is built around several key components:

  • View System: Enhanced Backbone views with template rendering, UI binding, and region management
  • Region Management: View lifecycle management within DOM containers
  • Collection Views: Specialized views for rendering collections with child view management
  • Behavior System: Reusable view functionality through mixins
  • Application Layer: Global application state and region management
  • Memory Management: Automatic cleanup and "zombie" prevention for views and regions
  • Event Architecture: Enhanced event handling with Backbone.Radio integration

Capabilities

Views and Template Rendering

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;
}

Views and Template Rendering

Collection Views

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);
}

Collection Views

Region Management

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;
}

Region Management

Objects and Applications

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;
}

Objects and Applications

Behaviors

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;
}

Behaviors

Utilities and Configuration

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;

Utilities and Configuration

Core Types

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;
}