Handlebars partials books

by amindunited

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script id="books" type="text/x-handlebars-template">
{{#each books}}
    <div class="books-wrap">
        <h1>{{category}}</h1>
                
        {{> subs}}
    </div>
{{/each}}
</script>
<script id="subs" type="text/x-handlebars-template">
    <div>
        <ul>
        {{#each sub-categories}}
            <li><h2>{{../category}} : {{name}}</h2>
                {{!#with}}
                {{saveToContext "sub-category" name}}
                {{> titles}}
                {{!/with}}
            </li>
        {{/each}}
        </ul>            
    </div>
</script>
<script id="titles" type="text/x-handlebars-template">
    <div>
        <ul>
            {{#each titles}}
            <li>
            {{name}} (<i>{{getFromContext "sub-category"}}</i>)
            </li>
            {{/each}}
        </ul>
    </div>
</script>
<div id="result"></div>

JavaScript

var data = {
        'books':
            [
                {
                    'category':'fiction',
                    'sub-categories':[
                        {'name':'scifi', 'titles':[{'name':'A Fridge Too Far'}, {'name':'They Eat'}]},
                        {'name':'comedy'},
                        {'name':'drama'},
                        {'name':'romance'}
                    ]
                }, 
                {
                    'category':'non-fiction',
                    'sub-categories':[
                        {'name':'history'},
                        {'name':'self help'},
                        {'name':'geography'},
                        {'name':'science', 'titles':[{'name':'Earthworms'}, {'name':'Quarks'}]}
                    ]
                }
            ]
        };

//add_handlebar_helper_functions();
var contextualValues = {}
Handlebars.registerHelper('getFromContext', function(name){ return contextualValues[name]});
Handlebars.registerHelper('saveToContext', function(name, value){ contextualValues[name] = value; console.log(contextualValues); })
Handlebars.registerHelper("debug", function(optionalValue) { console.log("Current Context"); console.log("===================="); console.log(this);   if (optionalValue) { console.log("Value"); console.log("===================="); console.log(optionalValue); } });

Handlebars.registerPartial("subs", $("#subs").html());
Handlebars.registerPartial("titles", $("#titles").html());
var template = $("#books").html();
var compiler = Handlebars.compile(template);
$("#result").html(compiler(data));