BB: Status updater

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(false, index);
    });

/**
 *	Returns an object consisting of a username and status.
 *	@param {Boolean} rand  should the username be randomly selected or just based on the username array index.
 *	@param {Number} index  the array index value within the usernames array.
 */
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.
 *	@return {undefined}	
 */
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 =...