JSFiddle - React, Tailwind, and code Playground

by Luke

HTML

<!--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>
				<p><input id="author" type="text"></input></p>
				<p><input id="title" type="text"></input></p>
				<p><textarea id="body"></textarea></p>
				<button id="postpost">Save And Publish</button>
			</form>
			
			<a href="/">All Posts</a>
		</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="jquery.min.js"></script>
		<script src="underscore-min.js"></script>
		<script src="backbone-min.js"></script>
		<script src="app.js"></script>
	

	</head>
	
	<body>
		
	<!--Entry Point Scripts-->
		<!--Router can be-->
		<script>
		
			$(document).ready(function(){
				var approuter = new appRouter();
			  	Backbone.history.start({pushState: true});
			});
		
		/*
			var approuter = new appRouter();
		  	Backbone.history.start({pushState: true});
		*/	
		</script>
	</body>

JavaScript

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

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

var postsListView = Backbone.View.extend({
	collection: new 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.
	//*BOTH WORKS; this.collection = new postsCollection() in initialize: OR  collection: new postsCollection(),
	template1: _.template( $('#postsListTemplate').html() ),//!!!Once forgot .html().
	template2: _.template( $('#postsListItemTemplate').html() ),
	initialize: function(){
		//this.collection = new postsCollection();
		//*this works also; collection: new postsCollection().
		//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;
		//* return this in every views render: if you want to chain el to render() of the view, for example in router  while pcaing the rendered views el into DOM.
	},
	
	renderPostsListItem: function(){
		console.log("view method renderPostsListItem have been reached.");
		this.ul = 'ul';
		this.collection.forEach(function(each){
			$(this.ul).append( this.template2( each.attributes ) );
			//!this.el or this.$el. (each) or (each.toJSON()).
			//*SOLVED: set el: aString and use this.$el.
			//*Use .toJSON() or .attributes while interpolating template with data in var each; otherwise Reference error can't find variable 'variablename'.
			}, this);
		return this;
	},
	
	events: {//!!events attr is not a function but an object.
		"click a": 'toPostFormRoute'
	},
	toPostFormRoute:...