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 id="connection-template" type="text/template">
    <a id="link-<%= alt %>" class="social-links" href="<%= href %>">add <%= name %></a>
</script>

CSS

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

JavaScript

var M = Backbone.Model.extend({});
var ConnectionView = Backbone.View.extend({
    tagName: 'div',
    events: {
        "click .social-links": "check"
    },
    initialize: function() {
        this.render();
        this.model.bind("change", this.render);
    },
    render: function() {
        var template = _.template($("#connection-template").html(), this.model.toJSON());
        this.$el.html(template);        
    },
    check: function(e) {
        e.preventDefault();
        console.log("woot");
    }
});

var m = new M({
    alt: 'alt',
    href: 'href',
    name: 'name'
});

var $connections = $('<div>');
var conn = new ConnectionView({ model: m });
$connections.append(conn.el);

var template = _.template('<%= connectionsList %>');
$('#view-goes-here').append(template({
    connectionsList: $connections.html()
}));