title: Hiding a table row in custom Polymer element with named scopes
body: <p>I'm relatively new to Polymer and am trying to hide a table row in my custom element using the index of my named scope. It's not working at all, and I suspect I'm not on the right track. Could someone explain what I should be doing? Also, can {{index}} be used in element class names and IDs? </p>
  
  <pre><code>&lt;link rel="import" href="bower_components/polymer/polymer.html"&gt;
  &lt;polymer-element name="task-lists" attributes="name"&gt;
      &lt;template repeat="{{t in tasks}}"&gt;
          &lt;template repeat="{{t, tindex in tasks}}"&gt;
              &lt;table&gt;
                  &lt;tr id="{{tindex}}"&gt;
                      &lt;td&gt;
                          &lt;input type="checkbox" id="task1" class="checkBox" value="None" name="check" /&gt;
                          &lt;label for="task1"&gt;&lt;/label&gt;
                          &lt;span on-click="{{hideLink}}"&gt;{{t.name}}&lt;/span&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/template&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          Polymer('task-lists', {
              ready: function () {
                  this.tasks = [
                      {name: 'Painting'},
                      {name: 'Cleaning'}
                  ]
              },
              hideLink: function () {
                  var row = document.getElementById("{{tindex}}");
                  row.display = 'none';
              }
          })
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>