JSFiddle - React, Tailwind, and code Playground

by Eric Howe

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('title') %>"</p>
            </li>
            <li>
                <label for='project-title'>Project Title:</label>
                <input id='project-title' type='text' value="<%= project.get('title') %>" />
            </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('description') %></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({
    initialize: function() {
        this.set({ title: 'TITLE', description: 'DESC' });
    }
});
var V = Backbone.View.extend({
    el: $('#view-goes-here'),
    template: _.template($('#tmpl').html()),
    initialize: function(){
        this.model = new M();
    },

    render: function() {
        $(this.el).html(this.template({project: this.model}));
        return this;
    }
});

var v = new V();
v.render();