JSFiddle - React, Tailwind, and code Playground

by rowntreerob

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
<div id="postapp">
    <div class="title">
         <h2>TMS -Groups Maint.</h2>

    </div>
    <div class="content"></div>
</div>
<script type="text/template" id="manage-posts-template">

    < div class = "section" >

    < header id = "header" > < input id = "new-Post"
    placeholder = "My Groups List:"
    type = "text" / > < /header>

        <div id="main">          
          <ul id="post-list">
            <img src='images/spinner.gif ' class='
    spinner ' />
          </ul>
        </div>
      </div>
</script>
<script type="text/template" id="item-template">
    < div class = "view" > < a href = "#"
    class = "relation" > < img src = "images/user.png"
    style = "vertical-align:middle"
    width = "40"
    height = "40" > < /a>	
	  <label class="post-content"><%= name %></label > < button class = "todo-destroy" > < /button>	
	</div >

    < /li>
</script>

JavaScript

Parse.initialize("3KxPBTPSTe8f0iexGanSagCztLp6wSPzJkyMLAbR", "hX1QXBGpqK7604kxox50c4bhxTm08yNLFBfGlGWo");
var AppState = Parse.Object.extend("AppState", {
    defaults: {
        filter: "all"
    }
});

var Post = Parse.Role.extend({
    // Default attributes for the Post.
    defaults: {
        name: "Class name..."
    },
    // Ensure that each Post created has `content`.
    initialize: function () {
        if (!this.get("name")) {
            this.set({
                "name": this.defaults.name
            });
        }
    }
});

var PostList = Parse.Collection.extend({
    model: Post
});

var PostView = Parse.View.extend({

    tagName: "li",

    // TEMPLATE
    template: _.template($('#item-template').html()),
    //TODO Event on href for students icon
    // EVENTS
    events: {
        "click .relation": "userrelation"
    },

    initialize: function () {
        _.bindAll(this, 'render');
    },

    // Re-render the contents of the Post item.
    render: function () {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

    // U have the relation obj in the model as 'users'
    userrelation: function () {
        var relation = this.model.relation("users");
        console.log("CLICK on " + this.model.id);
        relation.query().find().then(function (students) {
            var mstudents = new UserList(students);
            var studentView = new ManageUsersView({
                collection: mstudents
            });

            $("#user-list").html(studentView.render().el);

        });
    }
});

var ManagePostsView = Parse.View.extend({

    // Delegated events for creating new items, and clearing completed ones.
    events: {
        "keypress #new-Post": "createOnEnter"
    },

    el: ".content",

    initialize: function () {
        var self = this;

        _.bindAll(this, 'addOne', 'addAll',  'createOnEnter');

        // Main Post management template
 ...