Sample Alloy project with view/model binding

alloy.js

Alloy.Globals.winTop = (OS_IOS && parseInt(Ti.Platform.version, 10) >= 7) ? 20 : 0;
Ti.UI.backgroundColor = "#fff";

index.js

Ti.API.info('seeded: ' + Ti.App.Properties.hasProperty('seeded'));
if (!Ti.App.Properties.hasProperty('seeded')) {
	for(var i=1,j=7;i<j;i++) {
		Alloy.createModel('rows', { title: 'Row '+i}).save();
	}
	Ti.App.Properties.setString('seeded', 'yes');
}

Alloy.Collections.rows.fetch();

$.addRow.addEventListener('click', function(){
	Alloy.createModel('rows', { title: 'Row ' + (Alloy.Collections.rows.size()+1)}).save();
	Alloy.Collections.rows.fetch();
});

$.index.open();

index.tss

".container": {
	backgroundColor:"white",
	top: Alloy.Globals.winTop
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000"
}
"#addRow": {
	top: 0,
	title: 'Add a row',
	height: '30dp'
}
"TableView": {
	top: '40dp'
}

index.xml

<Alloy>
	<Collection src="rows" />
	<Window id="index"  title="Model Test" class='container'>
		<Button id="addRow"/>
		<TableView id="table" dataCollection="rows">
			<TableViewRow>
				<Label text="{title}" left="5"/>
			</TableViewRow>
		</TableView>
	</Window>
</Alloy>

row.js

exports.definition = {
	config: {
		"columns" : {
			"title" : "text"
		},
		adapter: {
			type: "sql",
			collection_name: "rows"
		}
	},
	extendModel: function(Model) {
		_.extend(Model.prototype, {
			// extended functions and properties go here
		});

		return Model;
	},
	extendCollection: function(Collection) {
		_.extend(Collection.prototype, {
			// extended functions and properties go here
		});

		return Collection;
	}
};