JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
	<!--Templates-->
		
		<!--Post Templates-->
		<script type="text/template" id="postsListTemplate">
			<h1>Blog</h1>
			<h2>All Posts</h2>
			
			<ul></ul>
			<p><a href="/posts/postform">Add New Post</a></p>
		</script>
		
		<script type="text/template" id="postsListItemTemplate">
			<li>{{title}}</li>
		</script>
		
		<script type="text/template" id="postTemplate">
			<a href="/">All Posts</a>
			
			<h3>{{title}}</h3>
			<p>{{pubDate}}</p>
			<p>{{content}}</p>
			
			<a href="/posts/:id/comments">Comments</a>
		</script>
		
		<script type="text/template" id="postFormTemplate">
			<form>
				<input id="name" type="text"></input>
				<input id="title" type="text"></input>
				<textarea id="content"></textarea>
				<button id="postpost"></button>
			</form>
		</script>
		
		<!--Comment Templates-->
		
		<script type="text/template" id="commentsListTemplate">
			<a href="/">All Posts</a>
			<a href"/posts/:id">Post</a>
			
			<h1>Comments</h1>
			
			<ul></ul>
		</script>
		
		<script type="text/template" id="commentsListItemTemplate">
			<li>
				<p>{{name}}</p>
				<p>{{pubDate}}</p>
				<p>{{content}}</p>
			</li>
		</script>
		
		<script type="text/template" id="commentFormTemplate">
			<form>
				<input id="name" type="text"></input>
				<textarea id="content"></textarea>
				<button id="postcomment"></button>
			</form>
		</script>
		
	<!--Linked Files: Libs & Scripts-->
		<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>

JavaScript

_.templateSettings = {
     interpolate: /\{\{(.+?)\}\}/g
};
//Define Models, Collections, Views 
var postModel = Backbone.Model.extend({
	
});

var postsCollection = Backbone.Collection.extend({
	model: postModel,
	url: "/posts"
});

var postsListView = Backbone.View.extend({
	el: 'body',
	collection: postsCollection,//! The Collection may be created to use in view. with new Coolectionname(). SOLVED it must be created this attr is not suffcent and is not crating it. 
	template1: _.template( $('#postsListTemplate').html() ),//!!!Once forgot .html().
	template2: _.template( $('#postsListItemTemplate').html() ),
	
	initialize: function(){
		this.render();
		this.collection = new postsCollection();
		this.collection.fetch();
		this.collection.on('add', this.renderPostsListItem, this);
	},
	
	render: function(){
		this.$el.html( this.template1() );//!this.el or this.$el. (each) or (each.toJSON()). SOLVED: use this.$el alongside el: a string, without $().
		return this;
	},
	
	renderPostsListItem: function(){
		this.collection.forEach(function(each){
			this.$el.append( this.template2(each) );//!this.el or this.$el. (each) or (each.toJSON()). SOLVED: use this.$el alongside el: a string, without $().
		});
		return this;
	},
	
	events: {//!!events attr is not a function but an object.
		"click a": 'toPostFormRoute',
	},
	toPostFormRoute: function(e){
		e.preventDefault();
		this.hrefOfPostForm = $( e.currentTarget ).attr("href");
		Backbone.navigate( this.hrefOfPostForm , {trigger: true});
	}
});


var postFormView = Backbone.View.extend({
	el: 'body',
	template: _.template( $('#postFormTemplate').html() ),
	
	initialize: function(){
		this.render();
	},
	
	render: function(){
		this.$el.html( this.template() );//?where in dom is the this.el
	}
});


//Define Client-Side Routes
var appRouter = Backbone.Router.extend({
	routes: {
		'/posts/postform': 'viewPostForm',
		'': 'viewPosts',
	},
	
	viewPosts: function(){
		this.postslistview = new...