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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<div class="js-ctn"></div>

<script type="text/template" class="js-template">
    <h1>Hey, <%= name %></h1>
</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
    font-family: Roboto;
    color: #191919;
}

a {
    color: #191919;
}

JavaScript

console.clear();

// Dummy Data
var data = {
    "id": 1,
    "name": "John Doe"
}


// Classes
var PersonModel = Backbone.Model.extend();
var PersonView = Backbone.View.extend({
    
	template: _.template( $('.js-template').html() ),
     
    render: function() {
		this.$el.html( this.template( this.model.toJSON() ) ); //or this.model.attributes if toJSON() overrid
        
        return this;
    }
});

// Setup
var personModel = new PersonModel(data, {parse:true});
var personView = new PersonView({
	model: personModel
});

// Add to DOM
$('.js-ctn').html(personView.render().el);