JsRender - allowCode from Stack Overflow

http://stackoverflow.com/questions/10019578/define-a-variable-inside-a-jsrender-template

by AndreiVaranita

HTML

<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<button id="toggleButton">View all items</button>

<div id="datascape"></div>

<script id="datascapeTemplate" type="text/x-jsrender">

<div id="dsViewport">
    
    <div class="ds-column" style="width:{{:(name.length*100)}}px;">
        <h1 id="datascapeName">{{:name}}</h1>
        <div><span id="dsToggle">see all</span></div>
    </div>
    {{* colcounter = 1; }}
    {{:colcounter}}
    {{for sections ~showIt=showInvisible}}
    
    {{if (editorspick_amount > 0 || ~showIt)}}
    <div class="ds-section">
        
        <h3>{{:label}}</h3>
        <div class="ds-column" id="start">
        
        {{for items}}
            
            {{* if (colcounter > 4){ 
                colcounter = 1;
                }} 
        </div>
        <div class="ds-column" id="start">
                    
            {{* } }}
            
            {{if ( editorspick || ~showIt) }}     
            <div class="ds-item {{* if (data.editorspick){ }} nowActive {{*} }} {{* if (data.active){ }} nowActiveRed {{*} }}"  background="{{:background}}" bgcolor="{{:bgcolor}}" fgcolor="{{:fgcolor}}">
                <div class="ds-item-container">
                    <h4>{{:title}}<br/>{{:time}}</h4>
                    
                    <p><a item="{{:id}}" href="{{:url}}" class="itemLink">view file {{:colcounter}}</a></p>
                   </div>
            </div>
            
            {{* colcounter++; }}
            {{/if}}
            
        {{/for}}
        </div>
        {{* colcounter=1; }}
            {{/if}}
        </div>
    {{/for}}
    {{* colcounter=1; }}
    

    
</div>


</script>

CSS

#toggleButton{
    cursor: pointer
}

JavaScript

var datascape= {};  
var rendered=false;

$.templates("myTmpl", {markup: "#datascapeTemplate", allowCode: true });

$('#toggleButton').click(function(){
    if(!rendered){
        rendered = true;
        $("#datascape").html(
            $.render.myTmpl( datascape.json )
        ).show();
    }
});
    
    
datascape.json= {
    "showInvisible": true, // I added this
    "name": "2011",
    "sections": [
        {
            "label": "November",
            "items": [
                {
                    "id": "2011_lumiere",
                    "title": "LUMIERE",
                    "time": "17/11/2011 > 20/11/2011",
                    "visible": false,
                    "editorspick": false,
                    "active": false,
                    "bgcolor": "#000000",
                    "fgcolor": "#FFFFFF"
                },
                {
                    "id": "2011_glow",
                    "title": "GLOW",
                    "time": "05/11/2011 > 12/11/2011",
                    "visible": false,
                    "editorspick": false,
                    "active": false,
                    "bgcolor": "#000000",
                    "fgcolor": "#FFFFFF"
                }
            ],
            "editorspick_amount": 0
        },
        {
            "label": "October",
            "items": [
                {
                    "id": "2011_scopitone---2011",
                    "title": "Scopitone 2011",
                    "time": "10/10/2011 > 16/10/2011",
                    "visible": false,
                    "editorspick": false,
                    "active": false,
                    "bgcolor": "#000000",
                    "fgcolor": "#FFFFFF"
                },
                {
                    "id": "2011_senses",
                    "title": "Senses!",
                    "time": "06/10/2011 > 02/09/2012",
                    "visible": false,
                    "editorspick": false,
                    "active":...