Question

嗨，我只是一个聚合物的新手，我希望这个问题对你来说听起来不傻:(

我正在试图建立一个图像库，我正在使用这个想法：From this page

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

我真的不明白为什么这个代码工作正常，如果我在示例中使用它，但如果我创建一个proyect：聚合物初始化app-drawer-template，我用它作为一个元素从一个调用我有一个错误：（

Uncaught ReferenceError: HTMLImports is not defined(anonymous function) @ simple-gallery.html:91

当然我不是很清楚，但我不知道为什么，希望有人有时间给我一个简短的解释:(

非常感谢你的时间。

Answer 1

我遇到了同样的问题，所以我在主html中添加了以下include：

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

这对我有用。

如果我使用的话，为什么这个组件不起作用：polymer init app-drawer-template

1 个答案: