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/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<div class="js-app"></div>

<script type="text/template" class="js-card">
    <h2>Order Card</h2>
    
    <div class="order-regions js-order-regions">
	    <div class="js-region--orders">
        	<h2>Orders</h2>
            <button class="js-show-order">Show order</button>
        </div>
		<div class="js-region--order"></div>
    </div>
</script>

<script type="text/template" class="js-order">
    <h2>Order</h2>
    <button class="js-close">Close</button>
</script>

SCSS

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

body {
    padding: 5%;
}

.card {
    padding: 10px;
    background: lightBlue;
}

.order {
    background: lightGreen;
}

.orders {
    background: cyan;
}

JavaScript

console.clear();

var data = {
    date: new Date()
};

// Classes

var OrderView = Backbone.View.extend({

	className: 'order',
    
    events: {
    	'click .js-close': 'orderCloseClicked'
    },
    
	template: _.template( $('.js-order').html() ),
        
    render: function() {
		this.$el.html( this.template() );
        
        return this;
    },
    
    orderCloseClicked: function(event) {
    	event.preventDefault();
        
        this.trigger('close:order');
    },
    
    onDestroy: function() {
    	this.remove();
    }
});

var CardView = Backbone.View.extend({

	className: 'card',
    
    events: {
    	'click .js-show-order': 'showOrderClicked'
    },
    
    activeRegion: null,
        
	template: _.template( $('.js-card').html() ),
        
    render: function() {
		this.$el.html( this.template() );
        
        this.onRender();
        
        return this;
    },
    
    onRender: function() {
    	// Set up some regions
    	this.ordersRegion = this.$('.js-region--orders');
    	this.orderRegion = this.$('.js-region--order');
    },
    
    showOrderClicked: function(event) {
    	event.preventDefault();
        
        // Get order id
        // Instance model with id
        
        // Instance Order
		this.orderView = new OrderView();
               
        // Inject Order intro region
        this.orderRegion.html( this.orderView.render().el );
        
        this.showOrder();
        
        // Listen for the close event firing from the child view
        this.listenTo(this.orderView, 'close:order', this.hideOrder, this);
    },
    
    showOrder: function() {
    	console.log('Showing order');
        
        // Add is-hidden to .js-region--orders
        // Wait for transitionend
        // Remove is-hidden from .js-region--order
    },
    
    hideOrder: function() {
		console.log('Hiding order');
        
        // Add is-hidden to .js-region--order
        // Wait for transitionend
        // Remove...