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

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

SCSS

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

body {
    padding: 5%;
}

.card {
    background: white;
    padding: 8px;
    border: 1px solid #eee;
    margin: 5px;
}

.nav {
    margin-top: 10px;
}

JavaScript

console.clear();

/**
 *	Notes:
 *	- If isMobile set all card models to isHidden?
 *	- Method to showFirst?
 *	- Just grab the first if load on mobile?
 */

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

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

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

		this.$el.html(this.fragment);
        
    	return this;
    },
    
    addCard: function(cardModel) {
				    		
    	var card = new Card({
    		model: cardModel
		});
		
		this.fragment.appendChild( card.render().el );
		
		return this;
    }
});

var Card = Backbone.View.extend({

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

// data attribute on nav item, click nav -> get data id -> trigger event - > listen in canvas view or whereever required -> toggle view
var NavView = Backbone.View.extend({
	
    className: 'nav',
    
    template: Handlebars.compile( $('.tmpl-nav').html() ),
    
    events: {
    	'click .js-btn': 'navBtnClicked'
    },
	
    render: function() {
    	this.$el.html( this.template( this.collection.toJSON() ) );
        return this;
    },
    
    navBtnClicked: function(event) {
    	event.preventDefault();
        
        var $clicked = $(event.currentTarget),
        	clickedId = $clicked.data('id');
            
        console.log('show:view', clickedId);
    }
});

var cardsCollection = new CardsCollection(data,...