Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
254 lines (189 sloc) 6.74 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>StackMob</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/json2-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/underscore-1.3.3-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/backbone-0.9.2-min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/2.5.3-crypto-sha1-hmac.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.5.5-min.js"></script>
<script>
<!-- //PASTE YOUR INIT HERE --->
StackMob.init({
appName: "backbonedemo",
clientSubdomain: "stackmob339",
publicKey: "27453522-3dfe-4737-8865-72547e299331",
apiVersion: 0
});
(function($){
var Wine = StackMob.Model.extend({
schemaName: "wines"
});
var Wines = StackMob.Collection.extend({
model: Wine
});
var wines = new Wines();
wines.fetch({async: true});
var HomeView = Backbone.View.extend({
el: 'body',
initialize: function() {
this.template = _.template($('#item-home').html());
this.render();
},
render: function() {
var el = this.$el
el.empty();
el.append(this.template());
var listView = new ListView({collection:wines});
$('.span4').append(listView.render().el);
return this;
}
});
var ListView = Backbone.View.extend({
tagName: 'ul',
className : 'nav nav-list',
initialize: function() {
this.collection.bind('all', this.render,this);
this.template = _.template($('#item-list').html());
},
render:function (eventName) {
var template = this.template,
el = this.$el,
collection = this.collection;
$(".span4 ul").empty();
collection.each(function(wine){
el.append(template(wine.toJSON()));
});
el.append('<li><a href="#add">add new wine</a></li>');
return this;
}
});
var AddView = Backbone.View.extend({
className:"span8",
tagName: "div",
events: {
"click #saveBtn": "save",
"keypress .addName": "onEnter"
},
initialize: function() {
this.template = _.template($('#item-edit').html());
this.collection = this.options.collection;
this.render();
},
render: function() {
$('.span8').remove();
$(this.el).html(this.template());
$('.row').append(this.el);
return this;
},
onEnter: function(e) {
if (e.keyCode == 13) {
this.save(e);
}
},
save: function(e) {
var collection = this.collection;
e.preventDefault();
var wine = new Wine({name:$('#name').val() });
wine.create({
success: function(model){
collection.add(model);
}
});
$('#name').val('');
return this;
}
});
var UpdateView = Backbone.View.extend({
className:"span8",
tagName: "div",
events: {
"click #saveBtn": "save",
"keypress .addName": "onEnter"
},
initialize: function() {
this.template = _.template($('#item-edit').html());
this.model = this.options.model;
this.render();
},
render: function() {
$('.span8').remove();
$(this.el).html(this.template(this.model.toJSON()));
$('.row').append(this.el);
return this;
},
onEnter: function(e) {
if (e.keyCode == 13) {
this.save(e);
}
},
save: function(e) {
e.preventDefault();
this.model.save({name:$('#name').val()},{
success: function(model) {
}
});
return this;
}
});
AppRouter = Backbone.Router.extend({
routes:{
"":"home",
"add":"add",
"update/:id":"update"
},
home:function() {
new HomeView();
},
add:function() {
new AddView({collection:wines});
},
update:function(e) {
model = wines.get(e);
new UpdateView({model: model});
}
});
}(jQuery));
$(document).ready(function () {
wineApp = new AppRouter();
Backbone.history.start();
});
</script>
<script type="text/template" id="item-home">
<div class="container">
<div class="page-header">
<h1>My Wine App</h1>
</div>
<div class="row">
<div class="span4">
</div>
</div>
</div>
</script>
<script type="text/template" id="item-edit">
<form class="form-horizontal" method="post">
<fieldset>
<legend>Wine Detail</legend>
<div class="control-group">
<label class="control-label" for="input01">Name:</label>
<div class="controls">
<input type="text" class="input-xlarge addName" id="name" name="name" value="<%= name %>">
</div>
</div>
<div class="control-group">
<div class="controls">
<a href="#" id="cancelBtn" class="btn">close</a>
<a href="#" id="saveBtn" class="btn">save</a>
</div>
</div>
</fieldset>
</form>
</script>
<script type="text/template" id="item-list">
<li><a href="#update/<%= wines_id %>"><%= name %></a></li>
</script>
</head>
<body></body>
</html>