BB: Socket emulation

Updating user status.

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type="text/x-handlebars-template" class="tmpl-buddy">
	<span class="buddy__status is-{{status}}"></span>
    <h1 class="buddy__name">{{username}}</h1>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    font-family: Arial;
}

.buddy {
    padding: 16px 8px;
    background: white;
    border-bottom: 1px solid rgba(black, 0.2);
    
    &__status {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: #ddd;
        display: inline-block;
        transition: background-color .2s;

        &.is-away {
            background-color: #ffc107;
        }

        &.is-online {
            background-color: #4caf50;
        }

        &.is-offline {
            background-color: #ddd;
        }
    }
    
    &__name {
        display: inline-block;
        margin-left: 5px;
    }
}

JavaScript

console.clear();

var usernames = ['Joe', 'Peter', 'Simon'],
	status = ['online', 'offline', 'away'],
	data = usernames.map(function(value, index) {
	    return outputData(null, index);
    });

function outputData(rand, index) {
	return {
        username: !rand ? usernames[index] : _.sample(usernames),
        status: _.sample(status)
    }
};

console.log(data);

var Buddy = Backbone.Model.extend();

/**
 *	Buddies Collection
 *	Listens for any events published by the dummy event emitter, then accesses the correct model in the collection to be updated. The correct model is then set with the newly published data.
 *	
 */
var Buddies = Backbone.Collection.extend({
	model: Buddy,
    
    initialize: function() {
    	this.listenTo(Backbone.Events, 'buddy:status.update', this.updateData, this);
    },
    
    updateData: function(response) {
        var buddyToUpdate = this.findWhere({username: response.username});
        if(buddyToUpdate) {
            buddyToUpdate.set(response);
        }
    }
})

var BuddiesView = Backbone.View.extend({
	
    className: 'buddies',

	tagName: 'ul',
	
    initialize: function() {
    	this.fragment = document.createDocumentFragment();
    },
    
    render: function() {
    	this.collection.forEach(this.addBuddy, this);

        this.$el.html(this.fragment);

        return this;
    },
    
    addBuddy: function(buddy) {
    	var buddyView = new BuddyView({
            model: buddy
        });

        this.fragment.appendChild(buddyView.render().el);
        
        return this;
    }
});

/**
 *	Basic Backbone View with a listener specifically
 *	listening for any changes on the model status attribute.
 */
var BuddyView = Backbone.View.extend({

	className: 'buddy',

	tagName: 'li',
	
	template: Handlebars.compile( $('.tmpl-buddy').html() ),
    
    initialize: function() {
		this.listenTo(this.model, 'change:status', this.render);
    },
    
    render: function() {
   ...