JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type='text/template' id='src'>
<ul>
    <li>Render count : {{rendered}}</li>
  {{#each collection}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>

<div id='container'></div>
<button>Render</button>

CSS

#container {padding:10px}

JavaScript

var FullTemplateView=Backbone.View.extend({
    events: {
        "click li": function() { $("body").append("<p>clicked</p>") }
    },
    initialize: function(opts) {
        this.rendered=0;
        this.options = opts;
    },
    render:function() {
        var html, $oldel=this.$el, $newel;
        this.rendered++;
        
        html= this.options.template({
            rendered:this.rendered,
            collection:this.collection.toJSON()
        });
        $newel=$(html);
        
        // setElement takes care of this.undelegateEvents
        // but don't forget to unbind any other event manually set
        this.setElement($newel);
        
        //reinject the element in the DOM
        $oldel.replaceWith($newel);

        return this;
    }
    
});


var c = new Backbone.Collection([
        {name:"My name"},
        {name:"Another name"},    
]);
var f = new FullTemplateView({
    collection: c,
    template: Handlebars.compile($("#src").html())
});

$("#container").append( f.render().$el );
$("button").on("click",function(e) {
    e.preventDefault();
    console.log(f.render().el);
});