JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<form id="person">
<input name="name" class="span12" />
<input name="email" class="span12" />
</form>
CSS
.span12 {
height: 20px;
width: 200px;
padding: 4px;
font-size: 14px;
margin: 10px;
}
JavaScript
Backbone.Stickit.addHandler({
selector: '*',
setOptions: {validate:true}
});
var person = new Backbone.Model({email:'delambo@gmail.com', name:'matt'});
// Wrap set and console.log the arguments that are passed in.
var oldset = Backbone.Model.prototype.set;
Backbone.Model.prototype.set = function(k, v, o) {
console.log(k, v, o);
return oldset.call(this, k, v, o);
};
new (Backbone.View.extend({
initialize: function() {
this.setElement($('#person'));
this.model = person;
},
bindings: {
'input[name=name]': 'name',
'input[name=email]': 'email'
},
render: function() {
this.stickit();
return this;
}
}))().render();