Question

I need to keep a “colcounter” variable inside the loop that will be used to fill a jsrender template.

Here is my template code

  <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">toggle</span></div>
    </div>
{{=colcounter}}
    {{for sections}}
    <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 ( data.selected || datascape.showInvisible) {  }}     
            <div class="ds-item {{* if (data.featured){ }} nowActive {{*} }} {{* if (data.active){ }} nowActiveRed {{*} }}"  background="{{:background}}" bgcolor="#000000" fgcolor="#FFFFFF">
                <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++; }}

            {{* } }}

        {{/for}}
        </div>
        {{* colcounter=1; }}
        </div>
    {{/for}}
    {{* colcounter=1; }}
</div>


</script>

Unfortunately, it prints, on the very first iteration of the loop “Error: colcounter is not defined.”. Afterwards it works.

It seems the way i initialise my colcounter variable is not working but i fail to find the correct way. var colcounter =0 does not work.

UPDATE

• jsfiddle: http://jsfiddle.net/ZX6Mk/
• colcounter works now. I declared it in the global scope. But I have an issue with datascape.showInvisible. It also triggers the error
  Error: Cannot read property 'showInvisible' of undefined.

Thank you for your time,
a.

Answer 1

I took your fiddle and made a few changes. http://jsfiddle.net/johnpapa/bLSkz/

1. The toggleButton was being referred to in jQuery without the #. So I added that.List item, otherwise the click was not being captured.
2. Your fiddle did not reference jQuery nor JsRender, though you were using both, so I added them. (I assume you never ran the fiddle)
3. There was no datascape.showInvisible property, so I created one.

4. I passed showInvisible to the inner for loop using a parameter, so it could be accessed in its context.

   {{for sections ~showIt=showInvisible}}
   
   {{if (editorspick_amount > 0 || ~showIt)}}
   

5. The template you were trying to render did not exist, so I changed the rendering code to use the script tag you created. This also sets the allowCode=true, which is required to safely turn on the allowCode feature.

   $.templates("myTmpl", {markup: "#datascapeTemplate", allowCode: true });
   
   $('#toggleButton').click(function(){
       if(!rendered){
           rendered = true;
           $("#datascape").html(
               $.render.myTmpl( datascape.json )
           ).show();
       }
   });
   

6. I changed one place where you used {{* }} to instead use an {{if}} block since there was no need to use allow code.

This allowed all of the code to run and the template to render, though I admittedly did not follow all of what you were trying to do.

Hope this helps.

One suggestion … the allowCode feature makes for really ugly templates and hard to maintain and read. I highly recommend replacing it with helper functions (or other constructs). For example, you used allowCode to create the styling for some elements. You could have used a custom tag for this instead, and moved the logic to javascript and simplified your template. The colcounter could be moved to a helper function. It’s just much more readable to move the logic to javascript, and keep the template/html clean. Just my 2 cents 🙂