keystone.js

var Keystone = {};

Keystone.View = Backbone.View;

/** Weird shims to snug BackBone into a DOMLess environment **/
/** Remove DOM specific calls **/
_.each(['tagName','$'],function(param){
	delete Keystone.View[param];
});

/** Generic overrides, return the underlying TI object why not? **/
_.each(['remove','make','render','_ensureElement','delegateEvents'],_.bind(function(func){
	this[func] = function() { return this.obj }
},Keystone.View.prototype));

/** Class properties for Keystone.View **/
_.extend(Keystone.View.prototype, {
	obj : null,
	observables : {},

	observes : function(o) {

		if(!((events = this.events) && o.id)) return;

		Ti.API.info('Object ID:' + o.id);
		this.observables[o.id] = _.bind(function(){ return this },o);
		Ti.API.info('Observables');
		Ti.API.info(this.observables);
		for(var key in events) {
			var method = this[events[key]];
			if (!method) throw new Error('Event "' + events[key] + '" does not exist');
			method = _.bind(method, this);

			var match = key.split(' ');
			var eventName = match[0];
			var selector  = match[1].split('#').join('');

			if(!this.observables[selector]) throw new Error('Object with ID:"' + selector + '" does not exist');
			this.observables[selector]().addEventListener(eventName,method);
		}
		return o;
	}
});

showoff.js

Ti.include('underscore.js');
Ti.include('backbone.js');
Ti.include('keystone.js');
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

//
// create controls tab and root window
//
var RowView = Keystone.View.extend({
	initialize : function(options) {
		this._render();
	},
	events : {
		'click #close' : 'close',
	},
	_render : function() {
		this.obj = Ti.UI.createLabel({ text: this.options.text, textAlign:'center', width:'auto', id : 'close' });
		this.obj.height = 20;
		this.obj.top = 20 + (this.options.number * 20);
		this.observes(this.obj);
	},
	close : function() {
		this.obj.visible = false;
	}
});

var MyView = Keystone.View.extend({

	initialize : function(options) {
		this.count = 0;
		this._render();
	},
	events : {
		'click #add' : 'add'
	},
	add : function() {
		var row = new RowView({text:'Number #' + this.count, number:this.count});
		this.obj.add(row.obj);
		this.count += 1;
	},

	open : function() {
		this.obj.open();
	},
	_render : function() {
		this.obj = Ti.UI.createWindow(_.extend({
			title: 'Title',
			backgroundColor : '#fff'
		},this.options));

		var add = Ti.UI.createLabel({
			color:'#F00',
			font:{fontSize:20,fontFamily:'Helvetica Neue'},
			text:'Add',
			width:'auto',
			id : 'add',
			top : 10,
			height : 20
		});

		this.observes(add);

		this.obj.add(add);
	}

});

var view = new MyView;
view.open();