JSFiddle - React, Tailwind, and code Playground

by hokuma

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<div id="view1"></div>
<div id="view2"></div>
<button id="switch-btn">Switch</button>

JavaScript

var MyView = Backbone.View.extend({
    events: { "click p": "notice" },
    el: "#view1",
    initialize: function() {
        this.render();
    },
    render: function() {
        console.log("render");
        this.$el.append("<p>Hello World!</p>");
    },
    notice: function() { alert("hello " + this.el.id); }
});

var view = new MyView();

$("#switch-btn").click(function(){
    if(view.el.id === "view1"){
        $("#view2").append(view.$el.children());
        view.setElement($("#view2"));
    }else{
        $("#view1").append(view.$el.children());
        view.setElement($("#view1"));
    }
});