BB: Mobile Nav collection

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/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type="text/x-handlebars-template" class="tmpl-card">
    <h1>Order #{{id}}</h1>
    <h2>Item: {{item}}</h2>
</script>

<script type="text/x-handlebars-template" class="tmpl-nav">
	{{#each .}}
		<button class="btn  js-btn" data-id="{{id}}">Show {{item}}</button>
    {{/each}}
</script>


<button class="js-add-card">Add Card</button>

SCSS

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

body {
    padding: 5%;
}

.card {
    background: white;
    padding: 8px;
    border: 1px solid #eee;
    margin: 5px;
    display: none;
    
    &.is-visible {
        display: block;
    }
}

.nav {
    margin-top: 10px;
}

JavaScript

console.clear();

var data = [
    {
        "id": 11478,
        "item": "Item number 1"
	}, {
        "id": 12452,
        "item": "Item number 2"
    }, {
    	"id": 3125,
        "item": "Item number 3"
    }
];

var isMobile = true;

var CardModel = Backbone.Model.extend();
var CardsCollection = Backbone.Collection.extend({
	model: CardModel
});

var Cards = Backbone.View.extend({
	
    className: 'orders',
    
    isRendered: false,
    
    stateClasses: {
    	visible: 'is-visible'
    },
    
    initialize: function() {
    	this.fragment = document.createDocumentFragment();
        
        this.listenTo(this.collection, 'add', this.addCard, this);
        this.listenTo(Backbone.Events, 'show:view', this.showView, this);
        
        this.views = {};
    },
    
    render: function() {
    	this.collection.forEach(this.addCard, this);

		this.$el.html(this.fragment);
        
        if(isMobile) {
        	var firstModel = this.collection.first();
        	this.showView(firstModel.get('id'));
        }
        
        _.defer(function() {
            this.onRender();
        }.bind(this));
            
    	return this;
    },
    
    onRender: function() {
        this.isRendered = true;
    },
    
    addCard: function(cardModel) {
    				    		
    	this.views[cardModel.attributes.id] = new Card({
    		model: cardModel
		});
        
        if(this.isRendered) {
            this.$el.prepend( this.views[cardModel.attributes.id].render().el );
        } else {
            this.fragment.appendChild( this.views[cardModel.attributes.id].render().el );
        }
		
		return this;
    },
    
    showView: function(id) {
    	
        this.hideAllViews();
        
    	this.views[id].el.classList.add(this.stateClasses.visible);
    },
    
    hideAllViews: function() {
    	
        for(var key in this.views) {
        	this.views[key].el.classList.remove(this.stateClasses.visible);
        }
        
    }
});

var Card =...