javascript - Polymer自定义元素的自定义事件被处理多次

Question

我正在使用 Polymer v1.0 和 webcomponents-lite.js v0.7.11。我创建了相对于滚动方向属性垂直或水平滚动图像的自定义元素。我的问题是，当我尝试向索引页面添加几个元素时，最后一个元素加载图像并起作用。以前的元素不起作用。另外，我正在自定义元素的 Polymer 就绪函数中监听自定义事件，但只有最近添加的自定义元素的自定义事件被处理多次(创建了多少个自定义元素)。

(function () {
var element;
var imgData;
Polymer {
    is: 'image-scroller',
    properties{
        id: '',
        scrollDirection: '',
        imgJsonSrc: ''
    },

    ready: function () {
        element = this.querySelector("#imgContainer");

        $(element).on("ImageChanged",function (e){
            self.setScroller();
        });

        self.loadImagePathFromJSON(this.imgJSONSrc);

    },

    setScroller: function (){
        //Creates a custom scrollbar 
        var scrollViewHeight = this.querySelector("#scrollView").clientHeight;
        totalImageCount = imgData.images.length;
        scrollerHeight = parseFloat((scrollViewHeight / totalImageCount).toFixed(2));
        this.querySelector("#scroller").style.height = scrollerHeight+"px";
    },

    loadImagePathFromJSON: function(jsonSrc) {
        //Reads image paths from json file and creates an imgData object

        return imgData;
    },

    showImages: function(data){
        //Show images in div
    },
});
})();

Answer 1

您在 Polymer() 范围之外定义的 element 和 imgData 变量将为元素的所有实例共享。因此，每当您调用 element = this.querySelector("#imgContainer"); 时，此变量都会被覆盖，并且仅使用最新的引用，这就是为什么只有最后一个元素有效。

您必须在元素内部使用 this.element 和 this.imgData 以将它们绑定(bind)到元素实例。