JSFiddle - React, Tailwind, and code Playground

by philfreo

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>

<button id="fetch">fetch</button>
<button id="removeMe">remove view</button>
<button id="jquery-fetch">jquery only</button>

JavaScript

$('#fetch').click(function() {
    var Model = Backbone.Model.extend({
      url: '/gh/get/response.json/philfreo/jsFiddleGithubDemo/tree/master/Demo/?1'
    });
    
    var View = Backbone.View.extend({
        
        initialize: function() {
            this.model = new Model();
            this.listenTo(this.model, 'sync', this.render);
        },
        render: function() {
            this.$el.empty().html(this.model.get('test'));
            return this;        
        }
    });
    
    view = new View();
    $(document.body).append(view.render().$el);    
    
    view.model.fetch();
    window.view = view;
});

$('#removeMe').click(function() {
    view.remove();
});

$('#jquery-fetch').click(function() {
    $.getJSON('/gh/get/response.json/philfreo/jsFiddleGithubDemo/tree/master/Demo/?1', function(data) {
        var div = $('<div>').text(data.test);
        $(document.body).append(div);
    });
});