title: Polymer - Refresh Template With Bound Data
body: <p><strong>How do I refresh bound data in the <code>order-items-list</code> element from the <code>post-card</code> element?</strong></p>
  
  <p>I'm using <a href="https://www.polymer-project.org/" rel="nofollow" title="Polymer Project website">Polymer</a> (the <code>polymer-element</code>s are in the shadow DOM).</p>
  
  <p>I've been trying to figure this out for hours, but to no avail (I'm new to web development). One of the thing I tried is this: (givers error: <code>Cannot read property 'getElementsByTagName' of undefined</code>)</p>
  
  <pre><code>this.$.orderitemstemplateparent.getElementsByTagName('template')[0].iterator_.updateIteratedValue();
  </code></pre>
  
  <p>I have the following 3 files:</p>
  
  <p><code>index.html</code>:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body unresolved&gt;
          &lt;core-header-panel&gt;
              &lt;div id="container"&gt;
                  &lt;div id="order-items-div&gt;
                      &lt;order-items-list id="order-items-list"&gt;
  </code></pre>
  
  <p><code>order-items-list.html</code>:</p>
  
  <pre><code>&lt;polymer-element name="order-items-list"&gt;
      &lt;template&gt;
          &lt;div id="orderitemstemplateparent"&gt;
              &lt;template id="order-items-template" repeat="{{post in posts}}&gt;
      &lt;script&gt;
          Polymer ({
              // FUNCTIONS THAT UPDATE THE DATA {{posts}} HERE 
          });
      &lt;/script&gt;
  </code></pre>
  
  <p><code>post-card.html</code>:</p>
  
  <pre><code>&lt;polymer-element name="post-card"&gt;
      &lt;template id="card-template"&gt;
          &lt;div id="card-header"&gt;
              &lt;paper-ripple on-tap="{{cardClick}}"&gt;&lt;/paper-ripple&gt;
      &lt;script&gt;
          Polymer ({
              cardClick: function(event, detail, sender) {
                  // RELOAD #order-items-template FROM HERE
              }
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be appreciated.</p>