Extended Example

gistfile1.coffee

class Component extends Backbone.View

  defaults:
    'visible': true

  initialize: ->
    # defaults gets overriden by @config, which is overridden 
    # by the passed in options on initialization. So @config
    # acts as @defaults for something that extends Component
    @options   = _.extend({}, @defaults, @config, @options)
    for func, args of @options
      if @[func]?
        console.log(func)
        if _.isArray(args)
          @[func].apply?(@, args)
        else
          @[func].call?(@, args)
      null

  render: =>
    @
  
  class: (klass) =>
    return @ unless klass?
    @$el.addClass(klass)
    @

  css: (css) =>
    return @ unless css?
    @$el.css(css)
    @

  visible: (show) =>
    if show then @show() else @hide()
    @

  show: =>
    @render()
    @delegateEvents(@events)
    @$el.removeClass('hide')
    @_visible = true
    @

  hide: =>
    @$el.addClass('hide')
    @undelegateEvents()
    @_visible = false
    @


class Menu extends Component

  tagName: 'ul'

  config:
    'bar': 'testing'
    'class': 'menu'
    'visible': false

  initialize: ->
    super()

  bar: (string) =>
   console.log(string)
   @



menu = new Menu({
  'class': 'test-menu',
  'css': {
    'width': '300px',
    'background-color': 'blue'
  }
})



# Result:
# ---------------
# menu.el:
#   <ul class='menu test-menu hide' style='width: 300px; background-color: blue;'></ul>
#
# and the console will log out:
#   calling func: visible with args: false
#   calling func: bar with args: testing
#   testing
#   calling func: class with args: test-menu
#   calling func: css with args: [object Object]



# Go to http://documentcloud.github.com/backbone/ and open 
# the Console and Copy and Paste the following compiled 
# CoffeeScript to try it out
# ----------------------------------------------------------
var Component, Menu,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
  __hasProp = Object.prototype.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };

Component = (function(_super) {

  __extends(Component, _super);

  function Component() {
    this.hide = __bind(this.hide, this);
    this.show = __bind(this.show, this);
    this.visible = __bind(this.visible, this);
    this.css = __bind(this.css, this);
    this["class"] = __bind(this["class"], this);
    this.render = __bind(this.render, this);
    Component.__super__.constructor.apply(this, arguments);
  }

  Component.prototype.defaults = {
    'visible': true
  };

  Component.prototype.initialize = function() {
    var args, func, _base, _base2, _ref, _results;
    this.options = _.extend({}, this.defaults, this.config, this.options);
    _ref = this.options;
    _results = [];
    for (func in _ref) {
      args = _ref[func];
      if (this[func] != null) {
        console.log("calling func: " + func + " with args: " + args);
        if (_.isArray(args)) {
          if (typeof (_base = this[func]).apply === "function") {
            _base.apply(this, args);
          }
        } else {
          if (typeof (_base2 = this[func]).call === "function") {
            _base2.call(this, args);
          }
        }
      }
      _results.push(null);
    }
    return _results;
  };

  Component.prototype.render = function() {
    return this;
  };

  Component.prototype["class"] = function(klass) {
    if (klass == null) return this;
    this.$el.addClass(klass);
    return this;
  };

  Component.prototype.css = function(css) {
    if (css == null) return this;
    this.$el.css(css);
    return this;
  };

  Component.prototype.visible = function(show) {
    if (show) {
      this.show();
    } else {
      this.hide();
    }
    return this;
  };

  Component.prototype.show = function() {
    this.render();
    this.delegateEvents(this.events);
    this.$el.removeClass('hide');
    this._visible = true;
    return this;
  };

  Component.prototype.hide = function() {
    this.$el.addClass('hide');
    this.undelegateEvents();
    this._visible = false;
    return this;
  };

  return Component;

})(Backbone.View);

Menu = (function(_super) {

  __extends(Menu, _super);

  function Menu() {
    this.bar = __bind(this.bar, this);
    Menu.__super__.constructor.apply(this, arguments);
  }

  Menu.prototype.tagName = 'ul';

  Menu.prototype.config = {
    'bar': 'testing',
    'class': 'menu',
    'visible': false
  };

  Menu.prototype.initialize = function() {
    return Menu.__super__.initialize.call(this);
  };

  Menu.prototype.bar = function(string) {
    console.log(string);
    return this;
  };

  return Menu;

})(Component);

menu = new Menu({
  'class': 'test-menu',
  'css': {
    'width': '300px',
    'background-color': 'blue'
  }
})