Моя привязка шаблона в полимерах не работает?

Question

У меня есть элемент dom <dom-module id="x-app"> и на этом элементе купола я загружаю 3 страницы сайта. На второй странице я использую шаблон полимера, шаблон галереи

<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> 

и вот это мой simple-gallery код

<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> 

На третьей странице я загрузить тот же шаблон. Но когда я нажимаю на изображение шаблона третьей страницы, изображение всплывает на второй странице, а не на третьей странице, где я звоню.

Как сделать всплывающее изображение на странице, которая была вызвана?

Я попытался сделать два отдельных шаблона, но все же изображение всплывает на второй странице.

Пожалуйста, помогите

Answer 1

Всегда используйте Polymer.dom при выполнении DOM манипуляции с полимером. Избегайте использования обычных DOM-аксессуаров (document.querySelector, document.querySelectorAll, document.getElementById и т. Д.) Как можно больше.

Вот мое решение. Если у вас есть какие-либо вопросы о моем ответе, не стесняйтесь меня.

<!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>