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.js"></script>
<script type="text/x-blah" id="template">
<textarea rows="2" cols="50">Type something here and hit update. Notice what happens to what you typed.</textarea><br>
<button id="update">update!</button></div>
<p>Clicked: <%- counter %></p>
</script>
<div id="target"></div>
JavaScript
var ExampleModel = Backbone.Model.extend({
defaults: function() {
return {counter: 0}
},
increment: function(){
this.save({counter: this.get('counter')+1});
}
});
var ExampleView = Backbone.View.extend({
el: $('#target'),
template: _.template($('#template').html()),
initialize: function() {
this.model = new ExampleModel;
this.listenTo(this.model, 'change', this.render);
this.render();
},
events: {
'click #update': "action"
},
action: function(e) {
this.model.increment();
},
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
}
});
new ExampleView;