JSFiddle - React, Tailwind, and code Playground

by Hui Zheng

HTML

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript"  src="/json2.js"></script>
<script type="text/javascript"  src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script type="text/javascript"  src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

<script>
    (function ($) {

        var ListView = Backbone.View.extend({
            el: $('body'), // el attaches to existing element
            events: {
                'click button#add': 'addItem'
            },
            initialize: function () {
                _.bindAll(this, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here

                this.counter = 0; // total number of items added thus far
                this.render();
            },
            render: function () {
                $(this.el).append("<button id='add'>Add list item</button>");
                $(this.el).append("<ul></ul>");
            },
            addItem: function () {
                this.counter++;
                $('ul', this.el).append("<li>hello world" + this.counter + "</li>");
            }
        });

        var listView = new ListView();

    })(jQuery);
</script>