index.js

var components = {};

var initialized = false;

function getOptions(el, model, rootModel, view){
	var opts = {
		el: el,
		getOptions: function(newEl){
			return getOptions(newEl, model, rootModel, view);
		}
	};

	var data = model ? model.toJSON() : {};
	var rootData = rootModel ? rootModel.toJSON() : {};
	
	//include template helpers from marionette views
	if(view && typeof view.mixinTemplateHelpers === 'function'){
		view.mixinTemplateHelpers(data);
		view.mixinTemplateHelpers(rootData);
	}
	for(var i = 0; i < el.attributes.length; i++) {
		var attrib = el.attributes[i];
		if(attrib.value.indexOf('$$') === 0)
			opts[attrib.name] = getValue(rootData, attrib.value.substr(1,attrib.value.length - 1), el, view);
		else if(attrib.value.indexOf('$') === 0)
			opts[attrib.name] = getValue(data, attrib.value, el, view);
		else opts[attrib.name] = attrib.value;
	}

	return opts;
}

module.exports = {
	components: components,
	register: function (name, Component) {
		if(name.indexOf('-component') > 0) throw new Error('-component is already appended to the end of the name you pass in.');

		name = name + '-component';

		if(components[name]) {
			console.warn('Skipping `' + name + '` It is already registered.');
		}
		components[name] = Component;
		//console.info('`' + name + '` registered');
	},
	init: function (Backbone) {

		if(Backbone.__componentsInit) {
			console.warn('You are trying to initialize backbone-components again.');
			return;
		}

		initialized = true;

		console.info('Initializing with Backbone instance:', Backbone);

		Backbone.originalViewRef = Backbone.View;
		Backbone.View = Backbone.View.extend({
			constructor: function () {
				// console.debug('Applying custom component logic to View', this);
				Backbone.originalViewRef.apply(this, arguments);
				this.on('render', function () {
					var model = this.model;
					var _this = this;
					this.$el.find('*').each(function(index, el) {

						// skip if already initialized by lower component
						if(el.attributes.getNamedItem('__owner-view') && el.attributes.getNamedItem('__owner-view').value) {
							return;
						}

						if(!_this.components) _this.components = {};

						var componentClass = components[el.tagName.toLowerCase()] || _this.components[el.tagName.toLowerCase()];

						if(componentClass) {
							var rootModel = _this.rootModel;
							if(!rootModel){
								rootModel = model;
							}
							var rootView = _this.rootView;
							if(!rootView){
								rootView = _this;
							}


							var opts = getOptions(el, model, rootModel,_this, opts);
							//extend the component with anything on par
							var originalComponentClass = componentClass;
							componentClass = componentClass.extend(
								{rootModel: rootModel,
								 rootView: rootView,
								 parentView: _this,
								 parentModel: model,
								 initialize: function(opts){
									 //override intitialize so we can call parse component
									 if(this.parseComponent){
										 this.parseComponent(opts.el, opts);
									 }
									 //call the original inititalize prototype
									 if(originalComponentClass.prototype){
										 return originalComponentClass.prototype.initialize.call(this, opts);
									 }

								 }
								});



							//console.info('Creating component:', el.tagName.toLowerCase(), 'with opts', opts, 'for view:', _this.cid);


							var comp = new componentClass(opts);
							if(comp.parseOptions){
								comp.parseComponent();
							}

							if(!_this.views){
								_this.views = [];
							}
							_this.views.push(comp);
							try {
								el.setAttribute('__owner-view', _this.cid);
								if(comp.render) comp.render();
							} catch(err) {
								console.error('Error rendering', el, err, err.stack);
							}
							if(comp.triggerMethod) comp.triggerMethod('show');
						} else {
							if(el.tagName.toLowerCase().indexOf('-component') > 0) console.warn('No component registered for', el.tagName.toLowerCase());
						}

					});
				});
				this.on('attach', function () {
					if(this.views){
						for(var i in this.views){
							var comp = this.views[i];
							if(comp.triggerMethod) comp.triggerMethod('attach');
						}
					}
				});
			}
		});
	}
};

function getValue(data, expr, el, view) {
	data._parent = view;
    data._model = view.model;
    data._collection = view.collection;

	var parsedExpr = expr.substring(2, expr.length - 1);
	var keys = Object.keys(data).filter(function(key){ return key.indexOf("-") < 0;});
	var fnExpr = [
		'(function (',
		keys.join(','),
		'){ return ' + parsedExpr + '; })',
		'(' +keys.map(function (p) { return 'data["' + p + '"]'; }).join(',') + ')'
	].join('');

	var result = undefined;
	try {
		result = eval(fnExpr);
	} catch(err) {
		console.error('Error evaluating:', expr, 'for el:', el, 'inside view:', view.cid, view.name);
		console.error(err);

	}

	return result;
}