My template binding in polymerjs does not work?

Question

I have a dom element <dom-module id="x-app"> and on this dome element I am loading 3 website pages. On the second webpage I use a polymer template, gallery template

<link rel="import" href="simple-gallery.html">
<dom-module id="x-app">
<neon-animatable> //Second page
  <paper-material class="vertical layout"> 
    <simple-gallery>
<img data-original="img01.bmp" data-index='l1' on-click="load_popup" src="img01.bmp"> 
<img data-original="img02.bmp" data-index='l2' on-click="load_popup" src="img02.bmp">
<img data-original="img03.bmp" data-index='l3' on-click="load_popup">
</simple-gallery>
<hr></hr>
</paper-material>
</neon-animatable>

<neon-animatable> //Third page
  <paper-material class="vertical layout">
    <simple-gallery>
<img data-original="img01.bmp" data-index='l1' on-click="load_popup" src="img01.bmp"> 
<img data-original="img02.bmp" data-index='l2' on-click="load_popup" src="img02.bmp">
<img data-original="img03.bmp" data-index='l3' on-click="load_popup">
</simple-gallery>
<hr></hr>
</paper-material>
</neon-animatable>
</dom-module>

and here is it my simple-gallery code

<dom-module id="simple-gallery" >
<script>
            HTMLImports.whenReady(function () {
        (function() {
             var current_index = 0;
             var image_length = 0;

             Polymer({
                is: "simple-gallery",
                ready: function() {
                        var images = Polymer.dom(this).querySelectorAll('img');
                        var container = this.$.links;

                        for (var img in images) {
                            images[img].addEventListener('click',this.load_popup);
                            container.appendChild(images[img]);
                        }
                },
                load_popup: function(e, detail, sender) {
                    e.preventDefault();
                    var links = document.getElementById('links');
                    image_length = links.getElementsByTagName('img').length;

                    var image_url = e.target.getAttribute('data-original');
                    var modalbody = document.getElementsByClassName("modal-body")[0];
                    var modal_img = modalbody.getElementsByTagName('img')[0];
                    modal_img.setAttribute("src",image_url);
                    var modal = document.getElementsByClassName("modal")[0];
                    modal.style.display = 'block';

                    current_index = parseInt(e.target.getAttribute('data-index').replace("s",""));
                    return false;
                },
                next: function () {

                  current_index = current_index + 1;
                  if(current_index == (image_length + 1) ){
                      current_index = 1;
                  }
                  var current_image = document.querySelectorAll("[data-index='s"+current_index+"']");
                  image_url = current_image[0].getAttribute('data-original');
                  var modalbody = document.getElementsByClassName("modal-body")[0];
                  var modal_img = modalbody.getElementsByTagName('img')[0];
                  modal_img.setAttribute("src",image_url);
                },
                prev: function () {
                  current_index = current_index - 1;
                  console.log("inside prev");
                  if(current_index == 0 ){
                      current_index = image_length;
                  }
                  var current_image = document.querySelectorAll("[data-index='s"+current_index+"']");
                  image_url = current_image[0].getAttribute('data-original');
                  var modalbody = document.getElementsByClassName("modal-body")[0];
                  var modal_img = modalbody.getElementsByTagName('img')[0];
                  modal_img.setAttribute("src",image_url);
                },
                close: function () {
                  var modal = document.getElementsByClassName("modal")[0];
                  modal.style.display = "none";
                },

                });
        })();

            });
    </script>

    <template>

        <div id="gallery-panel" class="gallery-panel">
            <!-- The container for the modal slides -->
            <div class="slides">
                <div id="links" name="links"></div>
            </div>


            <!-- The modal dialog, which will be used to wrap the lightbox content -->
            <div class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a class="close"><button type="button" class="close" aria-hidden="true" on-click="close" style="color: #f57c00;">Close</button></a>
                            <h2 class="modal-title">Title</h2>
                        </div>
                        <div class="modal-body next"><img class='modal-img'  /></div>
                        <div class="modal-footer">
                            <paper-material id="previous" type="button" class="style-scope x-app x-scope paper-button-0  pull-left prev" elevation="1" on-click="prev">Previous</paper-material>
                           <paper-material id="next" type="button" class="style-scope x-app x-scope paper-button-0 next" on-click="next">Next</paper-material>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </template>
</dom-module>

On the third page I load the same template. But when I click on the third page template image the image pop-ups on the second page and not on the third page where I make the call.

How to make the image popup in the page that has been called?

I tried making two separate templates but still the image pop ups on the second page.

Please help

Answer 1

Always use Polymer.dom when doing DOM manipulations with Polymer. Avoid using regular DOM accessors (document.querySelector, document.querySelectorAll, document.getElementById, etc) as much as possible.

Here's my solution. If you have any questions about my answer, feel free to PM me.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <base href="http://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link rel="import" href="paper-material/paper-material.html">
</head>

<body>
  <dom-module id="x-app">
    <template>
      <neon-animatable>
        <paper-material class="vertical layout">
          <simple-gallery>
            <img data-original="http://lorempixel.com/100/100/sports" data-index='1' src="http://lorempixel.com/100/100/sports">
            <img data-original="http://lorempixel.com/100/100/abstract" data-index='2' src="http://lorempixel.com/100/100/abstract">
            <img data-original="http://lorempixel.com/100/100/" data-index='3' src="http://lorempixel.com/100/100/">
          </simple-gallery>
          <hr></hr>
        </paper-material>
      </neon-animatable>

      <neon-animatable>
        <paper-material class="vertical layout">
          <simple-gallery>
            <img data-original="http://lorempixel.com/100/100/sports" data-index='1' src="http://lorempixel.com/100/100/sports">
            <img data-original="http://lorempixel.com/100/100/abstract" data-index='2' src="http://lorempixel.com/100/100/abstract">
            <img data-original="http://lorempixel.com/100/100/" data-index='3' src="http://lorempixel.com/100/100/">
          </simple-gallery>
          <hr></hr>
        </paper-material>
      </neon-animatable>
    </template>
  </dom-module>

  <dom-module id="simple-gallery">
    <template>

      <div id="gallery-panel" class="gallery-panel">
        <!-- The container for the modal slides -->
        <div class="slides">
          <div id="links" name="links">
            <content select="img"></content>
          </div>
        </div>


        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <a class="close">
                  <button type="button" class="close" aria-hidden="true" on-click="close" style="color: #f57c00;">Close</button>
                </a>
                <h2 class="modal-title">Title</h2>
              </div>
              <div class="modal-body next">
                <img class='modal-img' />
              </div>
              <div class="modal-footer">
                <paper-material id="previous" type="button" class="style-scope x-app x-scope paper-button-0  pull-left prev" elevation="1" on-click="prev">Previous</paper-material>
                <paper-material id="next" type="button" class="style-scope x-app x-scope paper-button-0 next" on-click="next">Next</paper-material>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </dom-module>

  <x-app></x-app>
  <script>
    Polymer({
      is: 'x-app'
    });

    Polymer({
      is: "simple-gallery",
      properties: {
        currentIndex: {
          type: Number,
          value: 0
        },
        imageLength: Number
      },
      ready: function() {
        var images = Polymer.dom(this).querySelectorAll('img');
        var container = this.$.links;
        images.forEach(function(img) {
          img.addEventListener('click', this.load_popup.bind(this));
        }.bind(this));
      },
      load_popup: function(e, detail, sender) {
        e.preventDefault();
        var links = this.$.links;
        this.imageLength = Polymer.dom(this).querySelectorAll('img').length;

        var image_url = e.target.dataset.original;
        var modal_img = Polymer.dom(this.root).querySelector('img.modal-img');
        modal_img.setAttribute("src", image_url);
        var modal = Polymer.dom(this.root).querySelector(".modal");
        modal.style.display = 'block';

        this.currentIndex = parseInt(e.target.dataset.index);
      },
      next: function() {

        this.currentIndex = this.currentIndex + 1;
        if (this.currentIndex == (this.imageLength + 1)) {
          this.currentIndex = 1;
        }
        var current_image = Polymer.dom(this).querySelectorAll('img')[this.currentIndex - 1];
        var image_url = current_image.dataset.original;
        var modal_img = Polymer.dom(this.root).querySelector('img.modal-img');
        modal_img.setAttribute("src", image_url);
      },
      prev: function() {
        this.currentIndex = this.currentIndex - 1;
        if (this.currentIndex == 0) {
          this.currentIndex = this.imageLength;
        }
        var current_image = Polymer.dom(this).querySelectorAll('img')[this.currentIndex - 1];
        var image_url = current_image.dataset.original;
        var modal_img = Polymer.dom(this.root).querySelector('img.modal-img');
        modal_img.setAttribute("src", image_url);
      },
      close: function() {
        var modal = Polymer.dom(this.root).querySelector(".modal");
        modal.style.display = "none";
      }

    });
  </script>
</body>

</html>