JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<form id="my-form">
<label for="firstname">First name</label>
<input id="firstname" class="attribute" name="firstname" />
<input class="submit" type="submit"/>
<button id="instantiate-view">Instantiate View</button>
<br/>
<textarea id="log"></textarea>
</form>
CSS
form, textarea {
margin: 20px;
}
textarea {
height: 300px;
width: 400px;
}
JavaScript
var View = Backbone.View.extend({
el: '#my-form',
events: {
'click .submit': 'logFormValues'
},
logFormValues: function(event) {
event.preventDefault();
this.log("first name == " + this.$el.find('#firstname').val());
},
log: function(message) {
var timestamp = (new Date()).getTime();
var log = this.$el.find('#log');
log.val(log.val() + timestamp + ': ' + message + "\n");
}
});
$(document).ready(function() {
new View();
$('#instantiate-view').on('click', function(event) {
event.preventDefault();
new View();
});
});