JSFiddle - React, Tailwind, and code Playground

by Luke

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>aaa</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>
		</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:...

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({
	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.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';
        alert(this.collection.length);

		this.collection.forEach(function(each){
			$(this.ul).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){
		console.log("view method toPostFormRoute have been reached.");
		
		e.preventDefault();
		//this.hrefOfPostForm = $( e.currentTarget ).attr("href");
		//Backbone.navigate( this.hrefOfPostForm ,...