JSFiddle - React, Tailwind, and code Playground

by tmuecksch

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/template" id="tpl-PhotoListItemView">
    <div class="photo_box">
        <div class="photo_container">
            <img src="http://placekitten.com/200/150" class="photo">
        </div>
    </div>
</script>

CSS

#view-goes-here {
    padding: 50px;
    border: 1px solid black;
}

.photo_box > .photo_container > .photo {
    border: 10px solid #0f0;
}

JavaScript

var PhotoListItemView = Backbone.View.extend({
    template: _.template($('#tpl-PhotoListItemView').html()),
    render: function() {
        this.setElement(this.template());
        return this;
    }
});

var v = new PhotoListItemView;
$('#view-goes-here').append(v.render().el);