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">
	<div>
	    <h1>Order #{{id}}</h1>
    	<h2>Item: {{item}}</h2>
    </div>
</script>

<script type="text/x-handlebars-template" class="tmpl-nav-item">
	<button class="btn  js-btn">Show {{item}}</button>
</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({
	defaults: {
    	isActive: false
    }
});
var CardsCollection = Backbone.Collection.extend({
	model: CardModel
});

var Cards = Backbone.View.extend({
	
    className: 'orders',
    
    isRendered: false,
    
    initialize: function() {
    	this.fragment = document.createDocumentFragment();
        
        this.listenTo(this.collection, 'add', this.addCard, this);
    },
    
    render: function() {
    	this.collection.forEach(this.addCard, this);

		this.$el.html(this.fragment);
        
        _.defer(function() {
            this.onRender();
        }.bind(this));
            
    	return this;
    },
    
    onRender: function() {
        this.isRendered = true;
    },
    
    addCard: function(cardModel) {
    	    				    		
    	var cardView = new Card({
    		model: cardModel
		});
        
        if(this.isRendered) {
            this.$el.prepend( cardView.render().el );
        } else {
            this.fragment.appendChild( cardView.render().el );
        }
		
		return this;
    }
});

var Card = Backbone.View.extend({

	className: 'card',
	
    template: Handlebars.compile( $('.tmpl-card').html() ),
        
    initialize: function() {
    	this.listenTo(this.model, 'change:isActive', this.render, this);
	},
        
    render: function() {
    	this.$el.html( this.template( this.model.toJSON() ) );        
        return this;
    }
});

var NavView = Backbone.View.extend({
	
    className: 'nav',
    
    isRendered: false,
	
    initialize: function() {
	    this.fragment = document.createDocumentFragment();
    	this.listenTo(this.collection, 'add', this.addNavItem, this);
    },
    
    render: function() {
    	this.collection.forEach(this.addNavItem,...