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>
				<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="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});
			});		
		</script>
	</body>

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: 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.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){
		console.log("view method toPostFormRoute have been reached.");
		
		e.preventDefault();
		//this.hrefOfPostForm = $( e.currentTarget ).attr("href");
		//Backbone.navigate( this.hrefOfPostForm , {trigger: true});
		Backbone.history.navigate( '/posts/postform' , {trigger: true});
		console.log("view method toPostFormRoute have been reached.");
		
		
	}
});


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


//Define Client-Side Routes
var appRouter = Backbone.Router.extend({
	
	initialize:...