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>
<script id="rtemp" type="text/x-underscore-template">
    <span><%= title %></span>
</script>

JavaScript

var Photo = Backbone.Model.extend({
    initialize: function() {
        console.log('this model has been initialized');

        this.bind("change:title", function() {
            var title = this.get("title");
            console.log("My title has been changed to.. " + title);
            var pv = new PhotoView({ model: this });
            pv.render();
        });

    },

    setTitle: function(newTitle) {
        this.set({ title: newTitle });
    },

    setLocation: function(newLoc) {
        this.set({ location: newLoc });
    }
});

var PhotoView = Backbone.View.extend({
    el: $('body'),
    template: _.template($('#rtemp').html()),
    render: function(event) {
        var name = this.model.get('title');
        console.info('Render: ' + name);
        var template = this.template({
            title: name
        });
        console.info(this.model);
        this.$el.html(template);
        return this;
    }
});

var newPhoto = new Photo();
newPhoto.setTitle('Fishing');
newPhoto.setTitle('Sailing');