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/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://github.com/kahwee/backbone-deep-model/blob/master/dist/backbone-deep-model.min.js"></script>
<div class="js-app"></div>

<script type="text/template" class="tmpl-person">
    <p>{{name}}</p>
    <p>{{country}}</p>
</script>

SCSS

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

body {
    padding: 5%;
}

Babel + JSX

console.clear();

const data = {
	"name": "Joe Bloggs",
	"country": "USA"
};

const PersonModel = Backbone.DeepModel.extend();

const PersonView = Backbone.View.extend({

	initialize() {        
        this.template = Handlebars.compile($('.tmpl-person').html());
    },
    
    render() {
    	this.$el.html( this.template( this.model.toJSON() ) );
        return this;
    }
});

var person = new PersonView({
	model: new PersonModel(data)
});

$('.js-app').html( person.render().el );