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/x-handlebars-template" class="tmpl-person">
    <p>{{name}}</p>
    <p>{{country}}</p>
</script>

SCSS

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

body {
    padding: 5%;
}

JavaScript

console.clear();

/**
 *	Plan
 *	Render out 3 cards using card collection data
 *	Each card view will also render out a subview (SearchView) which will
 *	attach a SearchModel.
 *	After this we will set the CardView up to listen for an event which
 *	will contain the search model data and see what happens.
 */

var App = {
    start: function() {
    	
    }
}

// Create Card Model
App.CardModel = Backbone.Model.extend();

// Create Search Model
App.SearchModel = Backbone.Model.extend();

// Create Card Collection
App.CardCollection = Backbone.Collection.extend({
	model: App.CardModel
});

// Create Search View

// Create Card View
App.CardView = Backbone.View.extend({
	
    className: 'card',
    
    template: '<h1>Card</h1>',
    
    render: function() {
    	this.$el.html(this.template(this.model.toJSON()));
	
    	_.defer(function() {
        	this.afterRender();
        }.bind(this));

        return this;
    },
    
    afterRender: function() {
    	var searchModel = new App.SearchModel();

        this.searchView = new App.SearchView({
            el: this.$('.js-filters-menu'),
            model: searchModel
        });
	}
});

// Create Card Collection View
App.CardCollectionView = Backbone.View.extend({

	className: 'cards',
	
    template: '<h1>Cards</h1>',
    
    initialize: function() {
    	this.fragment = document.createDocumentFragment();
    },
    
    render: function() {
		this.collection.each(this.addCard, this);
        this.$el.html(this.fragment);

        return this;
    },
    
    addCard: function(modelModel) {
    	var card = new App.CardView({
            model: cardModel
        });
        
        this.fragment.appendChild( card.render().el );
    }
});