JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone.js"></script>
<body>
    <div>
        <button data-point="addAndCloseButton">Add &amp; Close View</button>
    </div>
</body>

JavaScript

// Define a new class
var View = Backbone.View.extend({   
 
    template: _.template('<span data-point="view">View</span>'),
    
    initialize: function(options) {
        this.$el.append(this.template());
    },
 
    close: function () {         
        this.remove();
    }
 
});

// Create and application view
var App = Backbone.View.extend({
    events: {
        'click [data-point="addAndCloseButton"]': 'addAndClose'
    },
 
    addAndClose: function () {
        this.$el.append('<div data-point="target"></div>');
        this.view = new View({
            el: this.$('[data-point="target"]')
        });
        this.view.close();
        // this.undelegateEvents();
        // delete this.view;
    }
 
});
 
// Create application
$(function () {
    var app = new App({
        el: 'body'
    });
});