{"id":6910,"date":"2014-05-11T17:43:32","date_gmt":"2014-05-11T17:43:32","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/05\/11\/define-a-variable-inside-a-jsrender-template-collection-of-common-programming-errors\/"},"modified":"2014-05-11T17:43:32","modified_gmt":"2014-05-11T17:43:32","slug":"define-a-variable-inside-a-jsrender-template-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/05\/11\/define-a-variable-inside-a-jsrender-template-collection-of-common-programming-errors\/","title":{"rendered":"define a variable inside a jsrender template-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/f148b2fabe4f88c40459f8d587b1ce5f?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\npixeline<\/p>\n<p>I need to keep a &#8220;colcounter&#8221; variable inside the loop that will be used to fill a jsrender template.<\/p>\n<p>Here is my template code<\/p>\n<pre><code>  \n\n\n\n    \n        <\/code><\/pre>\n<h1 id=\"datascapeName\"><code>{{:name}}<\/code><\/h1>\n<pre>\n        toggle\n    \n{{=colcounter}}\n    {{for sections}}\n    \n\n        <\/pre>\n<h3><code>{{:label}}<\/code><\/h3>\n<pre>\n        \n\n        {{for items}}\n\n            {{* if (colcounter &gt; 4){ \n                colcounter = 1;\n                }} \n        \n        \n\n            {{* } }}\n\n            {{* \n            if ( data.selected || datascape.showInvisible) {  }}     \n            \n                \n                    <\/pre>\n<h4><code>{{:title}}<br \/>\n{{:time}}<\/code><\/h4>\n<pre>\n\n                    <br \/>view file {{:colcounter}}\n                \n            \n\n            {{* colcounter++; }}\n\n            {{* } }}\n\n        {{\/for}}\n        \n        {{* colcounter=1; }}\n        \n    {{\/for}}\n    {{* colcounter=1; }}\n\n\n\n\n<\/pre>\n<p><code>Unfortunately, it prints, on the very first iteration of the loop \"Error: colcounter is not defined.\". Afterwards it works.<\/code><\/p>\n<p><code>It seems the way i initialise my colcounter variable is not working but i fail to find the correct way. <code>var colcounter =0<\/code> does not work.<\/code><\/p>\n<p><strong>UPDATE<\/strong><\/p>\n<ul>\n<li>jsfiddle: http:\/\/jsfiddle.net\/ZX6Mk\/<\/li>\n<li>colcounter works now. I declared it in the global scope. But I have an issue with datascape.showInvisible. It also triggers the error <code>Error: Cannot read property 'showInvisible' of undefined<\/code>.<\/li>\n<\/ul>\n<p>Thank you for your time, a.<\/p>\n<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/1f898d66fc8a8141d172f5771e2c0d82?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nSteve B<\/p>\n<p>I took your fiddle and made a few changes. http:\/\/jsfiddle.net\/johnpapa\/bLSkz\/<\/p>\n<ol>\n<li>The toggleButton was being referred to in jQuery without the #. So I added that.List item, otherwise the click was not being captured.<\/li>\n<li>Your fiddle did not reference jQuery nor JsRender, though you were using both, so I added them. (I assume you never ran the fiddle)<\/li>\n<li>There was no datascape.showInvisible property, so I created one.<\/li>\n<li>\n<p>I passed showInvisible to the inner for loop using a parameter, so it could be accessed in its context.<\/p>\n<pre><code>{{for sections ~showIt=showInvisible}}\n\n{{if (editorspick_amount &gt; 0 || ~showIt)}}\n<\/code><\/pre>\n<\/li>\n<li>\n<p>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.<\/p>\n<pre><code>$.templates(\"myTmpl\", {markup: \"#datascapeTemplate\", allowCode: true });\n\n$('#toggleButton').click(function(){\n    if(!rendered){\n        rendered = true;\n        $(\"#datascape\").html(\n            $.render.myTmpl( datascape.json )\n        ).show();\n    }\n});\n<\/code><\/pre>\n<\/li>\n<li>\n<p>I changed one place where you used <code>{{* }}<\/code> to instead use an <code>{{if}}<\/code> block since there was no need to use allow code.<\/p>\n<\/li>\n<\/ol>\n<p>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.<\/p>\n<p>Hope this helps.<\/p>\n<p>One suggestion &#8230; 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&#8217;s just much more readable to move the logic to javascript, and keep the template\/html clean. Just my 2 cents \ud83d\ude42<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>pixeline I need to keep a &#8220;colcounter&#8221; variable inside the loop that will be used to fill a jsrender template. Here is my template code {{:name}} toggle {{=colcounter}} {{for sections}} {{:label}} {{for items}} {{* if (colcounter &gt; 4){ colcounter = 1; }} {{* } }} {{* if ( data.selected || datascape.showInvisible) { }} {{:title}} {{:time}} [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6910","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=6910"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6910\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=6910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=6910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=6910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}