JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div id="content"></div>

JavaScript

$(function () {
     // Namespacing the App
     window.MyApp = {
         Models: {},
         Collections: {},
         Views: {}
     };

     // App is a shortcut for "window.MyApp"
     var App = window.MyApp;
     
     // Article Model
     App.Models.ArticleModel = Backbone.Model.extend({});
     
     // Article Collection
     App.Collections.ArticleCollection = Backbone.Collection.extend({
         model: App.Models.ArticleModel,
         
         // used for debugging
         // generates new Article
         // passing "myFlag"
         generateArticle: function (prepend) {
             prepend = !! prepend;

             var newId = _.uniqueId("article_");
             var article = {
                 id: newId,
                 title: "Article " + newId,
                 content: "Article " + newId + " content",
                 date: (new Date()).getTime()
             };
             
             // pass the "prepend" flag, so the View will know to prepend the Article instead of appending
             this.add(article, {
                 prepend: prepend
             });
             
             return article;
         }
     });
     
     // Article View
     // renders LI tag
     App.Views.ArticleView = Backbone.View.extend({
         tagName: "li",
         initialize: function (options) {
             this.template = _.template([
                 "<h5><%= title %></h5>",
                 "<p><%= content %></p>",
                 "<div><%= moment(date).fromNow() %></div>"].join(""));
         },
         render: function () {
             this.$el.html(this.template(this.model.toJSON()));

             return this;
         }
     });
     
     // ArticleCollection View
     // renders articles into UL element
     App.Views.ArticleCollectionView = Backbone.View.extend({
         events: {
             "click .js-add": "addNewArticle"
         },
         initialize: function () {
             this.template = _.template([
            ...