JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/html" id="tmplLikeButton">
    <p>hash: <%= hash %></p>
    <p>like button url: <%= likeUrlRoot + id %></p>
    
    <iframe src="//www.facebook.com/plugins/like.php?href=http://foo.com/videos/<%= id %>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35&amp;appId=289538387729205" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
</script>

<p>Pick a video:</p>
<a href="#video/1">video 1</a>
<a href="#video/2">video 2</a>
<a href="#video/3">video 3</a>
<p>&nbsp;</p>
<p id="meta"></p>
<p id="target"></p>

JavaScript

var Router = Backbone.Router.extend({

    routes: {
        "video/:id": "view"
    },

    view: function(id) {
        var model = videoCollection.get(id);
        videoView.model = model;
        videoView.render();
    }

});

var VideoModel = Backbone.Model.extend({
    defaults: {
        likeUrlRoot: "http://foo.com/videos/"
    }
});

var VideoCollection = Backbone.Collection.extend({
    model: VideoModel
});

var VideoView = Backbone.View.extend({
    el: "#target",

    template: _.template($("#tmplLikeButton").html()),

    render: function() {
        var context = this.model.toJSON();
        context.hash = location.hash;
        this.$el.html(this.template(context));
        return this;
    }
});


var videoCollection = new VideoCollection([
    new VideoModel({ id: 1, title: "foo" }),
    new VideoModel({ id: 2, title: "bar" }),
    new VideoModel({ id: 3, title: "baz" })
]);

var videoView = new VideoView();

new Router();
Backbone.history.start();