CODEWITHSUNDEEP
javascriptpolymerweb-componentpolymer-1.0
user5074177
user5074177

Reputation: 43

Custom event of Polymer custom element is handled more than one time

I am using Polymer v1.0 with webcomponents-lite.js v0.7.11. I have created custom element that scrolls images vertically or horizontally relative to scroll-direction attribute. My problem is that when i try to add several to index page, the last element loads images and works.Previous elements do not work. Also i am listening custom event in Polymer ready function of custom element but only custom event of the most recently added custom element is handled more than one time (how many custom elements created).

(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
    },
});
})();

Upvotes: 0

Views: 193

Answers (1)

Scarygami
Scarygami

Reputation: 15549

The element and imgData variable you define outside of the Polymer() scope will be shared for all instances of your element. So whenever you call element = this.querySelector("#imgContainer"); this variable will be overwritten and only the most recent reference will be used, which is why only your last element works.

You have to use this.element and this.imgData inside of your element to keep them bound to an element instance.

Upvotes: 2

Related Questions