JSFiddle - React, Tailwind, and code Playground

by mjmitche

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
 <button id="add-friend">Add Friend</button>

<ul id="friends-list"> </ul>

CSS

.nice {
    
    background-color: grey; 
    
    
}

JavaScript

var Friend = Backbone.Model.extend({
    name: null

});

var Friends = Backbone.Collection.extend({
    model: Friend
});

var FriendView = Backbone.View.extend({

    tagName: 'li',


    events: {
        'click span.swap': 'swap'

    },
    initialize: function() {

        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
    },

    swap: function(e) {

        var spin = e.target;
        var tit =  $(spin).css('color');

        if (tit === rgb(255,0,0)) {

            $(spin).css('color', 'black');
            $(spin).html('poor?');

        } else {

            $(spin).css('color', 'rgb(255,0,0)');
            $(spin).html('rich?');

        }




    },


    render: function(model) {
        $(this.el).addClass('nice').html('<span class="friend" style="color:pink">' + this.model.get('name') + '</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:rgb(255,0,0); cursor:pointer;">[rich?]</span>');
        return this;
    }

});

window.AppView = Backbone.View.extend({
    el: $("body"),
    events: {
        "click #add-friend": "showPrompt"
    },

    initialize: function() {

        _.bindAll(this, 'render', 'showPrompt');
        this.collection = new Friends();
        this.collection.bind('add', this.render);

    },

    showPrompt: function() {
        var friend_name = prompt("Who is your friend?");
        var friend_model = new Friend({
            name: friend_name
        });
        //Add a new friend model to our friend collection
        this.collection.add(friend_model);
    },

    render: function(model) {


        var newFriend = new FriendView({
            model: model

        });

        $("#friends-list").append(newFriend.render().el);

    }
});
var appview = new AppView();