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>
<div id="view-goes-here"></div>
<script type="text/jst" id="tmpl">
<% if (typeof project != 'undefined') { %>
<div id="edit-details">
<form id="edit-project-form">
<ul>
<li>
<p class='form-title'>Edit Project: "<%= project.get('timestamp') %>"</p>
</li>
<li>
<label for='project-title'>Project Title:</label>
<input id='project-title' type='text' value="<%= project.get('timestamp') %>" />
</li>
<li>
<label for='due-date'>Due Date:</label>
<input id='due-date' type='text'></input>
</li>
<li>
<label for='project-description'>Description:</label>
<textarea id='project-description'><%= project.get('base') %></textarea>
</li>
<li>
<input id='submit-project-edits' type='submit' value='Edit' />
</li>
</ul>
</form>
</div>
<% } %>
</script>
CSS
#view-goes-here {
padding: 50px;
border: 1px solid black;
}
JavaScript
var M = Backbone.Model.extend({
url: function() {
return "http://openexchangerates.org/latest.json";
}
});
var V = Backbone.View.extend({
el: $('#view-goes-here'),
template: _.template($('#tmpl').html()),
initialize: function(){
this.model = new M();
this.model.bind('change', this.render, this);
this.model.fetch({
error: function(model, response) {
alert('Unable fetch...Please try again...'+response.status);
},
success: function(model, response) {
alert('Fetched...'+model.get('timestamp'));
}
});
},
render: function() {
$(this.el).html(this.template({project: this.model}));
return this;
}
});
var v = new V();
v.render();