Necessary Pigeonholing Mechanism
    Have ideas to improve npm?Join in the discussion! »

    marionette.component

    0.0.1 • Public • Published

    Marionette.Component

    Build Status

    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.

    Installation

    Via npm

    $ npm install marionette.component

    Via bower

    $ bower install marionette.component

    Motivation

    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.

    Usage

    Creating components is very simple and at minimum requires only a component definition and view class.

    var MyView = Marionette.ItemView.extend({
      template: _.template('Hello World')
    });
     
    var MyComponent = Marionette.Component.extend({
      viewClass: MyView
    });
     
    var component = new MyComponent();

    To display a component inside a region, call showIn with the region instance as the argument.

    var MyApp = Marionette.Application.extend({
      regions: {
        mainRegion: '#main'
      }
    });
     
    var app = new MyApp();
    var region = app.getRegion('mainRegion');
     
    var component = new MyComponent();
     
    component.showIn(region);
     
    component.view instanceof MyView; //=> true
    component.region === region;      //=> true
    region.$el.text();                //=> 'Hello World'

    Remember that components are reusable, so you can instantiate them multiple times and display them in different regions.

    var MyApp = Marionette.Application.extend({
      regions: {
        sidebarRegion1: '#sidebar-1',
        sidebarRegion2: '#sidebar-2',
        sidebarRegion3: '#sidebar-3'
      }
    });
     
    var component1 = new MyComponent();
    var component2 = new MyComponent();
    var component3 = new MyComponent();
     
    var app = new MyApp();
    var regions = app.getRegions();
     
    component1.showIn(regions.sidebarRegion1);
    component2.showIn(regions.sidebarRegion2);
    component3.showIn(regions.sidebarRegion3);

    Components also take a model and/or collection option that will be passed along to the view.

    var Foo = Backbone.Model.extend();
    var List = Backbone.Collection.extend();
     
    var component = new MyComponent({
      model: new Foo(),
      collection: new List()
    });
     
    component.model      instanceof Foo;  //=> true
    component.collection instanceof List; //=> true
     
    component.model      === component.view.model;      //=> true
    component.collection === component.view.collection; //=> true

    Components can capture events triggered on the view and react to them.

    var MyComponent = Marionette.Component.extend({
      viewClass: MyView,
     
      viewEvents: {
        'foo': 'handleFoo',
        'select:bar': function(arg) {
          console.log('selected bar', arg);
        }
      },
     
      handleFoo: function() {
        console.log('handle foo');
      }
    });
     
    var component = new Component();
    component.showIn(region);
     
    component.view.trigger('foo');            // 'handle foo'
    component.view.trigger('select:bar', 42); // 'selected bar 42'

    API

    showIn(region)

    Show the component inside region. It triggers the following events on the component: before:show, before:show:view, show:view, show. With each event, it also calls the appropriate on* method, if available (thanks to triggerMethod).

    destroy()

    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, before:destroy and destroy, each with their respective on* callback from triggerMethod.

    Marionette.Object.prototype

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

    Definition options

    viewClass (*required)

    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 model and/or collection properties to the view.

    viewEvents

    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.

    Contributing/Feature Requests

    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 dev.

    Install

    npm i marionette.component

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    ISC

    Last publish

    Collaborators

    • avatar
    • avatar