0

I created new component in Polymer 2, inside that i will use 2 web components, component a for show name of div and lenght of components b who will run a dom-repeat inside this web component. With that said, after dom-repeat finishes my code isn't working how i want. I need to get lenght of components b after dom-repeat run finished to: - Get lenght and put in my counter in component a - Separate all components b in groups of 6 inside one div

I made some JQuery code in fiddle, and will put drop below, this worked with default div's, but when i put in ready method of my polymer element is returning 0, isn't waiting dom-repeat finish. I tried setTimeout but this doesn't worked too.

console.log('Init count');
var content = $('component-b').length;
console.log('Cards: ' + content);
var item = $('component-b');
for (var i = 0; i < item.length; i+=6){
  item.slice(i, i+6).wrapAll('<div class="list"></div>');
}
var lists = $('.list').length;
console.log('Lists: ' + lists);
$('component-a').attr({
  total:content
});
$('component-a').attr({
  totalPages:lists
});

Here i will put how this is working now. Component a have properties to show counter.

<template>
      <div class="secao">
          <h2>{{title}}</h2>
          <component-a>
            <template is="dom-repeat" items="{{products}}" as="product">
              <component-b class="product" product-id="{{product.productID}}" image-src="{{product.imageSrc}}" href="{{product.href}}"
          main-title="{{product.mainTitle}}" authors-text="{{product.author}}" price-discount-value="{{product.priceDiscount}}"
          price-value="{{product.realPrice}}" avaliation-score="{{product.avaliationScore}}" flag="{{product.flag}}"></component-b>
            </template>
          </component-a>
        </div>
      </template>

That is the result showed in Firefox. Init count Cards: 0 Lists: 0

But my Array have 24 cards, and with that jquery code would be 4 lists

Matheus Ribeiro
  • 35
  • 4
  • In ready method you will not get the count as by that time the dom won't be rendered. When you are repeating the component-b equal to the number of products, you can just pass one parameter as products length into component-a and do your functionality over there. – Vin Jun 26 '19 at 09:34
  • With a parameter you are creating a dependency between component-A and component-B. One alternative is to make every component B dispatch a 'connected'' Event. Component-A listens for those Events, resets a setTimeout on every Event so it can determine the finished state by "not having received an Event for X milliseconds" – Danny '365CSI' Engelman Jun 26 '19 at 11:40

0 Answers0