我有一个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>
在第三页上，我加载了相同的模板。但是当我点击第三页模板图像时，图像会弹出第二页而不是我打电话的第三页。
如何在已调用的页面中弹出图像？
我尝试制作两个单独的模板，但仍然会在第二页上弹出图像。
请帮忙
答案 0 :(得分：1)
使用Polymer进行DOM操作时始终使用Polymer.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>