Multiple form entries
Experimental UX for entering multiple entries of the same object.
Uses Backbone and localStorage to persist data. Won't work in IE9-
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<div id="seatmap" class="well">
<header>
<h1>Register your pets</h1>
<caption>All form entries are automatically saved</caption>
</header>
<div id="rows">
</div>
</div>
<!--
Mustache template representing each Pet
-->
<script type="html/template" id="row">
<#aisle>
</aisle>
<^aisle>
</aisle>
Lol
<^aisle>
</aisle>
<#aisle>
</aisle>
</script>
CSS
img, article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
#pets { margin: 1em auto; max-width: 640px; }
form { display: block; }
form .close { color: red; cursor: pointer; }
form ul { list-style-type: none; }
JavaScript
randomBoolean = function(){
return Math.random()<.5; // Readable, succint
};
$(function() {
// Pet model
var Seat = Backbone.Model.extend({
aisle: false,
id: 0,
row: 0
});
// Pets collection
// This collection is persisted via localStorage
var RowSeatsList = Backbone.Collection.extend({
model: Seat
});
// Pet entry view
RowSeatsEntryView = Backbone.View.extend({
template: $('#row').html(),
initialize: function() {
this.render();
},
render: function() {
var model = this.model.toJSON();
model.cid = this.model.cid;
$(this.el).html(Mustache.to_html(this.template, model));
return this;
}
});
// Pets entry list view
SeatMapEntryView = Backbone.View.extend({
el: $('#seatmap'),
views: '',
initialize: function() {
Rows.bind('add', this.addAll, this);
//Rows.bind('reset', this.addAll, this);
//Rows.bind('all', this.render, this);
for (var j=1; j<3;i++){
var tempCollection = new RowSeatsList;
for (var i=1; i<5;i++){
var randomBooleanValue = randomBoolean();
tempCollection.add(new Seat({id:i,aisle:randomBooleanValue, row:j}));
}
// toJson?
Rows.all(tempCollection.toJSON());
tempCollection.clear();
}
this.render();
},
addAll: function(rowSeatsList) {
var view = new RowSeatsEntryView({
collection: rowSeatsList
});
this.views += view;
},
render: function() {
this.$el.html( this.views );
return this;
}
});
// Instantiate pets collection and application
window.Rows = new RowSeatsList;
window.App = new...