product categories

by Richard Hunter

HTML

<div id='menu'></div>
<div id='view'></div>

<script type='text/template' id='template'>
    <h1>this is the view</h1>
    <% if(products.length == 0)  { %>
        <h2>no results for this search</h2>
    <% } else { %>    
        <%  _.each(products, function (product) { %>
            <h2><%= product.name %></h2>
        <% }); %>
    <% } %>
</script>

JavaScript

function Product(name, categories) {
	this.name = name;
    this.categories = categories;
}


var categories = [
    'food',
    'Scotland',
    'books',
    'sport'
];


var products = [
	new Product('Whiskies of the world', ['food', 'Scotland']),
    new Product('Kenny Dalgleish autobiography', ['Scotland', 'sport', 'books']),
    new Product('Deila Smith Cookbook', ['food', 'books']),
    new Product('Sport diet', ['food', 'sport','books'])
];

function filter(refinements, products) {
	return _.filter(products, function (product) {
    	return (refinements.length == _.intersection(product.categories, refinements).length);    
    });
}

function display(products) {
	var template = document.getElementById('template').innerHTML;
    var templateFunction = _.template(template);
    (document.getElementById('view')).innerHTML = templateFunction({ products : products });
}

var ViewService = {
	display : function (refinements) {
        if(refinements.length == 0) {
        	display(products);
        } else {
        	display(filter(refinements, products));
        }
    }
};
ViewService.display([]);

var processedCategories = {};
for(var i = 0; i < categories.length; i++) {
	var category = categories[i];
    processedCategories[category] = [];
    for(var j = 0; j < products.length; j++){
    	var productCategories = products[j].categories;
        if(productCategories.indexOf(category) > -1) { 
        	processedCategories[category] = _.union(processedCategories[category], productCategories);   
        }
    }
}

var menu = document.getElementById('menu');
createSubMenu(menu, Object.keys(processedCategories), 1, []);

function createSubMenu(el, categories, level, searchRefinements) {

    var frag = document.createDocumentFragment();
    var list = document.createElement('ul');
    list.setAttribute('class', 'level-' + level);
    for (var category in categories) {
        var li = document.createElement('li');
        li.id = categories[category];
       ...