literal">true</span>,
    hide:<span class="hljs-literal">false</span>
  };
  <span class="hljs-keyword">let</span> template = <span class="hljs-keyword">new</span> TT(<span class="hljs-built_in">document</span>.getElementById(<span
    class="hljs-string">"example"</span>),scope);
  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"toggle-visibility"</span>).onclick = ()=&gt;{
    scope.show =!scope.show;
    scope.hide =!scope.hide;
    template.set(<span class="hljs-string">""</span>,scope);
  };
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre>
<p class="has-line-data" data-line-start="76" data-line-end="77">See the live <a href="../examples/if.html"
                                                                                 target="_blank">example</a></p>
<h3 class="code-line" data-line-start="77" data-line-end="78"><a id="dataforeach_77" target="_blank"></a>data-foreach
</h3>
<p class="has-line-data" data-line-start="78" data-line-end="80">Tells the parser to render a tag n-times according to
  an array of objects.<br>
  You can retrieve object property using <code>key</code> or setting the <code>data-foreach-key-name</code> attribute in
  the same tag ( best for nested arrays ).</p>
<pre><code class="has-line-data" data-line-start="81" data-line-end="131"><span class="hljs-tag">&lt;<span
  class="hljs-title">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">data-foreach</span>=<span
    class="hljs-value">"array1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>Name <span class="hljs-tag">&lt;<span
    class="hljs-title">span</span>&gt;</span>${key.name}<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span><span
    class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>Value <span class="hljs-tag">&lt;<span
    class="hljs-title">span</span>&gt;</span>${key.value}<span class="hljs-tag">&lt;/<span
    class="hljs-title">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">data-foreach</span>=<span
    class="hljs-value">"array2"</span> <span class="hljs-attribute">data-foreach-key-name</span>=<span
    class="hljs-value">"prop"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>Name <span class="hljs-tag">&lt;<span
    class="hljs-title">span</span>&gt;</span>${prop.name}<span class="hljs-tag">&lt;/<span
    class="hljs-title">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>Value <span class="hljs-tag">&lt;<span
    class="hljs-title">span</span>&gt;</span>${prop.value}<span class="hljs-tag">&lt;/<span
    class="hljs-title">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">data-foreach</span>=<span
      class="hljs-value">"prop.array"</span> <span class="hljs-attribute">data-foreach-key-name</span>=<span
      class="hljs-value">"propNested"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>Name <span class="hljs-tag">&lt;<span
    class="hljs-title">span</span>&gt;</span>${propNested.name}<span class="hljs-tag">&lt;/<span
    class="hljs-title">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>Value <span class="hljs-tag">&lt;<span
    class="hljs-title">span</span>&gt;</span>${propNested.value}<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span><span
    class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">let</span> array1 = [{
  name: <span class="hljs-string">"array1_1"</span>,
  value: <span class="hljs-number">10</span>
},
{
  name: <span class="hljs-string">"array1_2"</span>,
  value: <span class="hljs-number">100</span>
}];
<span class="hljs-keyword">let</span> array2 = [{
  name: <span class="hljs-string">"array2_1"</span>,
  value: <span class="hljs-number">0</span>,
  array : [{
    name: <span class="hljs-string">"array2_1_0_nested"</span>,
    value: <span class="hljs-number">0</span>
  }]
},
{
  name: <span class="hljs-string">"array2_2"</span>,
  value: <span class="hljs-number">10</span>,
  array : [{
    name: <span class="hljs-string">"array2_2_0_nested"</span>,
    value: <span class="hljs-number">1</span>
  },{
    name: <span class="hljs-string">"array2_2_0_nested"</span>,
    value: <span class="hljs-number">2</span>
  }]
}]
<span class="hljs-keyword">let</span> scope = {array1, array2};
<span class="hljs-keyword">let</span> template = <span class="hljs-keyword">new</span> TT(<span class="hljs-built_in">document</span>.body,scope);
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre>
<p class="