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/template" class="tmpl-orders">
	<div class="js-region--orders"></div>
    <button class="js-action--add-order">Add order</button>
</script>

SCSS

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

body {
    padding: 5%;
}

Babel + JSX

console.clear();

/**
 *	@todos
 *	- Render out a collection
 *	- Trigger a payload that gets picked up by collection
 *	- Add a model and just set it
 *	- 
 */

var data = [
	{
    	"name": "Order 1"
    }, {
		"name": "Order 2"
    }, {
    	"name": "Order 3"
    }
];

class OrderModel extends Backbone.Model {}
class OrdersCollection extends Backbone.Collection {
	model: OrderModel
}

class OrdersView extends Backbone.View {

	initialize() {        
        this.template = Handlebars.compile($('.tmpl-orders').html());
    }
    
    render() {
    	this.$el.html( this.template() );
        return this;
    }
    
    renderRows() {
        for(const [index, element] of this.collection) {
        	console.log(index, element);
        }
    }
    
    renderRow(model) {
		
    }
};

class OrderView extends Backbone.View {
	
    tagName: 'li'
    
    render() {
    	this.$el.html(this.model.toJSON());
        return this;
    }
}

const 
	ordersCollection = new OrdersCollection(), 
	ordersView = new OrdersView({
		collection: ordersCollection
	});

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