// core.js
//

"use strict";

(function(w, $, M, undefined) {

	var demo = {

		config: {
			feature: {
				numItems: 4
			},
			smart: {
				numItems: 6
			},
			tablet: {
				numItems: 6
			},
			desktop: {
				numItems: 8
			}
		},

		init: function() {
			this.device   = $('#js-mrn').data('device');
			this.$config  = $('#js-config');
			this.numItems = 0;

			this.bindEvts();

			// Load the correct number of items in to the
			// module using device configuration values.
			this.loadItems( this.config[this.device].numItems );
		},

		bindEvts: function() {
			$('.add', this.$config).on('click', $.proxy(this.addItem, this));
			$('.remove', this.$config).on('click', $.proxy(this.removeItem, this));
		},

		loadItems: function(numItems) {
			this.numItems = numItems;

			$.when(

				$.get('carousel-items.json'),
				$.get('tpl/core-mrn.tpl')

			).then(function(itemData, tpl) {

				// To fix 'this'
				// var rendered = this.renderNumItems(numItems, tpl, itemData);
				var rendered = M.render(tpl[0], itemData[0]);
				$('#js-mrn').html(rendered);

			});
		},

		renderNumItems: function(numItems, tpl, itemData) {
			var rendered = M.render(tpl[0], itemData[0]);
			// ...Set itemData to numItems.

			return rendered;
		},

		addItem: function(e) {
			e.preventDefault();
			// ...
		},

		removeItem: function(e) {
			e.preventDefault();
			// ...
		}

	};

	// Initialise
	$(function() {
		demo.init();
	});
})(this, jQuery, Mustache);

// core.js
//

"use strict";

(function(w, $, M, undefined) {

	var demo = {

		config: {
			all: {
				minItems: 4,
				maxItems: 8
			},
			feature: {
				numItems: 4
			},
			smart: {
				numItems: 6
			},
			tablet: {
				numItems: 6
			},
			desktop: {
				numItems: 8
			}
		},

		init: function() {
			demo.device   = $('#js-mrn').data('device');
			demo.$config  = $('#js-config');
			demo.numItems = 0;
			demo.itemData = {};
			demo.tpl      = '';

			demo.bindEvts();

			// Load the correct number of items in to the
			// module using device configuration values.
			demo.loadItems( demo.config[ demo.device ].numItems );
		},

		bindEvts: function() {
			$('.add', demo.$config).on('click', demo.addItem);
			$('.remove', demo.$config).on('click', demo.removeItem);

			$(w.document).on('keyup', function(e) {
				var key = {
					"-": 109,
					"+": 107
				};

				if(e.keyCode === key['-']) {
					demo.removeItem(e);
				} else if(e.keyCode === key['+']) {
					demo.addItem(e);
				}
			});
		},

		loadItems: function(numItems) {
			demo.numItems = numItems;

			$.when(

				$.get('carousel-items.json'),
				$.get('tpl/core-mrn.tpl')

			).then(function(itemData, tpl) {

				demo.itemData = itemData[0];
				demo.tpl      = tpl[0];

				demo.render();
			});
		},

		render: function() {
			var itemDataSliced = {
				carouselItems: demo.itemData.carouselItems.slice(0, demo.numItems)
			};

			var rendered = M.render(demo.tpl, itemDataSliced);
			$('#js-mrn').html(rendered);
		},

		addItem: function(e) {
			e.preventDefault();

			if(demo.numItems < demo.config.all.maxItems) {
				demo.numItems++;
				demo.render();
			}
			
		},

		removeItem: function(e) {
			e.preventDefault();

			if(demo.numItems > demo.config.all.minItems) {
				demo.numItems--;
				demo.render();
			}
			
		}

	};

	// Initialise
	$(function() {
		demo.init();
	});

})(this, jQuery, Mustache);

Complete render(), add and remove item functionality