A simple base Backbone view class that adds subviews, rendering, and initialization.

npm install ribcage-view
1 downloads in the last week
40 downloads in the last month


A simple base Backbone view class that adds subviews, rendering, and initialization.


var View = require('ribcage-view');

 * A view that doesn't do anything but render a template
 * - a template is just a function that takes an object
 *   and returns a string to be rendered.
 * - all options that are passed into the view will also
 *   be passed into the template
var templateView = new View({
  template: templateFunction
, thing: 'will be passed to the template'

// Extending a ribcage-view
var MyView = View.extend({

  beforeInit: function (opts) {
    // gets called before initialization

, afterInit: funciton (opts) {
    // gets called after initialization

, template: function (context) {
    // return a string to be rendered

, context: function () {
    // define a context for the template

, bindEvents: function () {
    // gets called before loadData is called in render
    // useful for listening to model

, beforeRender: function () {
    // gets called before it's rendered

, afterRender: function () {
    // gets called after it's rendered


// Working with subviews
var ViewWithSubviews = View.extend({

  afterRender: function () {
    // append a view to this view's $el
    this.myView = new MyView();

    // note: there is also .prependSubview

    // append a view to a specific place in this $el
    this.appendSubview(new MyView(), this.$('#put-it-here'));

    // go through all the subviews
    this.eachSubview(function (subview) {

    // detatch a subview

    // close all subviews



// Extending a custom view
var Backbone = require('my-backbone')
  , RibcagedView = require('ribcage-view/extend')(Backbone.View);

// Do things with RibcagedView


  1. Remember to call __super__.initialize.apply(this, arguments) if you are override initialize. This fixes the loadData is not defined error. Alternatively, override afterInit and beforeInit instead.
  2. Subviews are closed when their parent is rendered, and will lose their events unless you call .delegateEvents() on them in the parent's afterRender. See #5.


Installing via npm is easy:

npm install ribcage-view

Ribcage requires you to use browserify (or some other way to get require on the front-end).



Run this command to run tests at http://localhost:9999.

# grunt dev


Tests can be run on Saucelabs.

# Run once to set up login info

# Run to test on sauce
$ grunt test
npm loves you