BB Skeleton

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>
<div class="js-app"></div>

<script type="text/template" class="tmpl-post">
    <b>{{author}}</b>
    <p>{{name}}</p>
    <p>{{title}}</p>
</script>

SCSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);

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

body {
    padding: 5%;
    font-family: Raleway;
    line-height: 1.4;
}

p {
    margin: 4px 0;
}

.post {
    background: white;
    margin: 8px 0;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    padding: 8px;
}

JavaScript

console.clear();

var data = [{
	"author": "flustered_fartbox",
	"id": "4kaark",
	"name": "t3_4kaark",
	"title": "Redditors who've hooked up with their best friend; how was the experience, and what was the aftermath?"
}, {
	"author": "v_Excise",
	"id": "4kaart",
	"name": "t3_4kaart",
	"title": "What combination of four items could you buy to freak out the cashier the most?"
}, {
	"author": "iSo_Cold",
	"id": "4kaas2",
	"name": "t3_4kaas2",
	"title": "Nerds and Geeks of Reddit; Have any of you ever found out you were being bullied by someone that had a crush on or otherwise admired you?"
}]

var App = {
	M: {}, V: {}, C: {}, utils: {},
    appEl: $('.js-app'),
	start: function() {
    	_.extend(this, Backbone.Events);
        
        var postsCollection = new this.C.Posts(data, {parse: true});
        var postsView = new this.V.PostsView({
        	collection: postsCollection
        });
        
        this.appEl.html(postsView.render().el);
    }
}

// Model
App.M.Post = Backbone.Model.extend();

// Collection
App.C.Posts = Backbone.Collection.extend({
	model: App.M.Post
});

// Collection view for posts
App.V.PostsView = Backbone.View.extend({
    isRendered: false,
    
    initialize: function() {
        this.fragment = document.createDocumentFragment();
        this.listenTo(this.collection, 'add', this.addTableRow, this);
    },
    
    render: function() {
    	this.collection.forEach(this.addPost, this);

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

        _.defer(function() {
            this.onRender();
        }.bind(this));

        return this;
    },
    
    onRender: function() {
    	this.isRendered = true;
    },
    
    addPost: function(model) {
    	var post = new App.V.PostView({
            model: model
        });

        if(this.isRendered) {
            this.$el.prepend( post.render().el );
        } else {
            this.fragment.appendChild( post.render().el );
        }

        return this;
    }
});

// View for a...