Skip to content

Instantly share code, notes, and snippets.

@aaronksaunders

aaronksaunders/index.html

Created March 26, 2012 17:27
Show Gist options
  • Save aaronksaunders/2206922 to your computer and use it in GitHub Desktop.
Save aaronksaunders/2206922 to your computer and use it in GitHub Desktop.
Download ZIP
Appcelerator Cloud Services with Backbonejs & Twitter Bootstrap
Raw
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Appcelerator Cloud Services Project</title>
<script type="text/javascript">
function onBodyLoad() {
startApp();
}
</script>
</head>
<div id="header"></div>
<div id="content" >
<p>
&nbsp;
</p>
<div class="container-fluid">
<div class="row-fluid">
<div id="sidebar" class="span3">
<table class="table table-bordered" id="list">
<tbody aria-live="polite" ></tbody>
</table>
</div>
<div id="detail-content" class="span6"></div>
</div>
</div>
</div>
<!-- Templates -->
<script type="text/template" id="tpl-place-list-item">
<td><a href='#places/<%= id %>'><%= name %></a></td>
</script>
<script type="text/template" id="tpl-place-details" class="">
<div class="form-horizontal">
<fieldset>
<legend>New Appcelerator Cloud Services TestProject</legend>
<div class="control-group">
<label for="input" class="control-label">Id:</label>
<div class="controls">
<input type="text" id="id" name="id" value="<%= id %>" disabled />
</div>
</div>
<div class="control-group">
<label for="input" class="control-label">Name</label>
<div class="controls">
<input type="text" id="name" name="name" value="<%= name %>" class="xlarge" required/>
</div>
</div>
<div class="control-group">
<label for="input" class="control-label">Address:</label>
<div class="controls">
<input type="text" id="address" name="grapes" value="<%= address %>" class="xlarge" />
</div>
</div><div class="control-group">
<label for="input" class="control-label">City:</label>
<div class="controls"><input type="text" id="city" name="city" value="<%= city %>" class="xlarge" />
</div>
</div>
<div class="control-group">
<label for="input" class="control-label">State:</label>
<div class="controls"><input type="text" id="state" name="state" value="<%= state %>" class="xlarge" />
</div>
</div>
<div class="control-group">
<label for="input" class="control-label">Phone:</label>
<div class="controls"><input type="text" id="phone_number" name="phone_number" value="<%= phone_number %>" class="xlarge" />
</div>
</div>
<div class="control-group">
<label for="textarea" class="control-label">Notes:</label>
<div class="controls">
<textarea id="description" name="description" class="xxlarge" ><%= custom_fields['description'] %></textarea>
</div>
</div>
</fieldset>
</div>
</script>
<!-- JavaScript -->
<script src="lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="lib/cocoafish-1.1.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
//
// download backbonejs and associated dependencies
// download the Cocoafish Javascript SDK
// download Twitter Bootstrap
//
// [email protected]
//
// blog posting is forthcoming, with more details
//
(function() {
Backbone.sync = function(method, model, options) {
var dao = new model.dao();
switch (method) {
case "read":
if(model.id)
dao.find(model, function(data) {
options.success(data);
});
else
dao.findAll(function(data) {
options.success(data);
});
break;
case "create":
dao.create(model, function(data) {
options.success(data);
});
break;
case "update":
dao.update(model, function(data) {
options.success(data);
});
break;
case "delete":
dao.destroy(model, function(data) {
options.success(data);
});
break;
}
};
window.MyDAO = function(db) {
console.log('initialize');
this.sdk = new Cocoafish('YOUR COCOAFISH APP ID');
};
_.extend(window.MyDAO.prototype, {
findAll : function(_callback) {
var that = this;
console.log('populate');
var callback = function(data) {
if(data) {
if(data.meta) {
var meta = data.meta;
if(meta.status == 'ok' && meta.code == 200) {
_callback(data.response.places);
}
}
}
}
that.sdk.sendRequest('places/query.json', 'GET', {}, false, callback);
},
create : function(model, callback) {
// TODO: Implement
},
update : function(model, callback) {
// TODO: Implement
},
destroy : function(model, callback) {
// TODO: Implement
},
find : function(model, _callback) {
var that = this;
console.log('populate');
var callback = function(data) {
if(data) {
if(data.meta) {
var meta = data.meta;
if(meta.status == 'ok' && meta.code == 200) {
_callback(data.response.places[0]);
}
}
}
}
that.sdk.sendRequest('places/query.json', 'GET', {
"place_id" : model.id
}, false, callback);
},
// Populate Place table with sample data
populate : function(callback) {
console.log('populate');
callback({});
}
});
//myDAO = new MyDAO();
window.Place = Backbone.Model.extend({
dao : window.MyDAO,
defaults : {
"country" : "United States",
"phone_number" : "(212) 555-1212",
"city" : "",
"state" : "",
}
});
window.PlaceCollection = Backbone.Collection.extend({
model : window.Place,
dao : window.MyDAO
});
window.PlaceListView = Backbone.View.extend({
el : $("#list"),
initialize : function() {
this.collection.bind("reset", this.render, this);
this.render();
},
render : function(eventName) {
_.each(this.collection.models, function(place) {
$(this.el).append(new PlaceListItemView({
model : place
}).render().el);
}, this);
return this;
}
});
// Views
window.PlaceListItemView = Backbone.View.extend({
tagName : "tr", //"li"
template : _.template($('#tpl-place-list-item').html()),
render : function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
window.PlaceView = Backbone.View.extend({
initialize : function() {
this.model.bind("change", this.render, this);
},
template : _.template($('#tpl-place-details').html()),
render : function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
//
// Router
//
var AppRouter = Backbone.Router.extend({
routes : {
"" : "list",
"places/:id" : "placeDetails"
},
list : function() {
window.placeList.fetch({
success : function() {
var w = new PlaceListView({
collection : window.placeList
});
$('#sidebar').html(w.render().el);
},
error : function() {
$("#notice").html("Could not load the data.");
}
});
},
placeDetails : function(id) {
this.place = window.placeList.get(id);
this.placeView = new PlaceView({
model : this.place
});
$('#detail-content').html(this.placeView.render().el);
}
});
var self = this;
window.placeList = new PlaceCollection();
$.ajaxSetup({
cache : false
});
self.app = new AppRouter();
Backbone.history.start();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment