Hackbone sketch

hackbone.js

window.Hackbone = (function () {
  var hackbone, setupEvents;

  hackbone = {
    extend: function (prototype) {
      var view = Backbone.View.extend(prototype),
          selector = view.prototype.el;

      if (typeof selector !== 'undefined') {

        _.extend(view, {
          attach: function ($root) {
            var $elements;

            $elements = $root.find(selector).add($root.filter(selector));

            $elements.each(function () {
              var $this = $(this);
              if (typeof $this.data('hackbone.view') !== 'undefined') return;
              $this.data('hackbone.view', new view({$el: $this}))
            })
          }
        });

        hackbone.attachableViews.push(view);
      }
      return view;
    },

    attachableViews: [],

    attach: function ($root) {
      var i,
          attachableViews = hackbone.attachableViews,
          length = attachableViews.length;

      for (i = 0; i < length; i++) {
        attachableViews[i].attach($root);
      }
    },

    total_time: 0
  };

  setupEvents = function () {
    $(function () {
      var MutationObserver, observer;

      hackbone.attach($(document.body));

      MutationObserver = window.MutationObserver ||
        window.WebKitMutationObserver ||
        window.MozMutationObserver;

      observer = new MutationObserver(function (mutations) {
        var i, length = mutations.length, addedNodes = [], start_time = new Date();
        for (i = 0; i < length; i++) {
          addedNodes.push.apply(addedNodes, mutations[i].addedNodes);
        }
        if (addedNodes.length > 0) hackbone.attach($(addedNodes));
        hackbone.total_time += new Date() - start_time;
      });

      observer.observe(document.body, {childList: true, subtree: true});
    })
  };

  setupEvents();
  return hackbone;
}());