index.cfm

<cfimport prefix="demo" taglib="libs/">

<demo:layout active="demo">

<header class="jumbotron subhead" id="overview">
	<h1>Mobile Apps with Backbone</h1>

	<p class="lead">Backbone brings structure to your Javascript applications by supplying
models, events, collections and views that easily connect to your
existing APIs over a RESTful JSON interface.</p>

</header>

<div class="row">
	<div class="span1"><img src="images/PhilSwim80.jpg"></div>
	<div class="span5"><h3>Phil Haeusler</h3><p>G+ <a href="https://plus.google.com/u/0/118343074546999808818/">Phil Haeusler</a><br/>Twitter: <a href="http://twitter.com/philhaeusler" target="_blank">@philhaeusler</a></p></div>
	<div class="span6"><h3>View Online</h3>

<p class="lead"><a href="http://thingsico.de/demos/backbone/" target="_blank">http://thingsico.de/demos/backbone/</a></p>

<h3>Play Along</h3>

<p class="lead"><a href="https://github.com/philhaeusler/mobilebackbone" target="_blank">https://github.com/philhaeusler/mobilebackbone</a></p>
</div>
</div>

<p></p>

<hr/>

<div class="row">
  <div class="span4"><h2>Backbone<h2><p><a href="http://documentcloud.github.com/backbone/" target="_blank">http://documentcloud.github.com/backbone/</a></p></div>
  <div class="span4"><h2>Events<h2><p>Listen to and trigger custom events</p><a href="events/" class="btn btn-success">View</a></div>
  <div class="span4"><h2>Models<h2><p>The data and logic of your application</p><a href="models/" class="btn btn-success">View</a></div>
</div>

<hr/>

<div class="row">
  <div class="span4"><h2>Collections<h2><p>Organise and sync your Models</p><a href="collections/" class="btn btn-success">View</a></div>
  <div class="span4"><h2>Views<h2><p>Bind your UI to Collections and Models</p><a href="views/" class="btn btn-success">View</a></div>
  <div class="span4"><h2>Going Mobile<h2><p>Connected, sometimes</p><a href="mobile/" class="btn btn-success">View</a></div>
</div>

<hr/>

<div class="row">
  <div class="span4"><h2>More Good Stuff<h2><p>
  <i class="icon-eye-open"></i> <a href="http://angularjs.org/" target="_blank">Angular JS</a><br>
  <i class="icon-eye-open"></i> <a href="http://incubator.apache.org/callback/" target="_blank">Apache Cordova</a><br>
  <i class="icon-eye-open"></i> <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a><br>
  <i class="icon-eye-open"></i> <a href="http://phonegap.com/" target="_blank">PhoneGap</a><br>
  <i class="icon-eye-open"></i> <a href="http://www.sencha.com/products/touch/" target="_blank">Sencha Touch</a><br>
  </p></div>

</demo:layout>