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

<script type="text/x-handlebars-template" class="tmpl-modal">
	<h1>What do you want to do?</h1>
	<p>{{cancelButtonText}}</p>
	<p>{{confirmButtonText}}</p>
</script>

SCSS

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

body {
    padding: 5%;
    font-family: Arial;
}

h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

JavaScript

console.clear();

var ModalModel = Backbone.Model.extend({
	defaults: {
    	'cancelButtonText': 'Cancel',
        'confirmButtonText': 'Ok'
	}
});

var ModelView = Backbone.View.extend({
	template: Handlebars.compile( $('.tmpl-modal').html() ),
    
    render: function() {
    	this.$el.html( this.template( this.model.toJSON() ) );
        return this;
    }
});

var modalModel = new ModalModel({
	'confirmButtonText': 'Confirm'
});

var modalView = new ModelView({
	model: modalModel
});

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