重复执行后的功能

时间:2019-06-25 13:57:30

标签: polymer web-component polymer-2.x dom-repeat google-web-component

我在Polymer 2中创建了新组件,其中我将使用2个Web组件,组件a用于显示div的名称,而组件b的长度将在该Web组件内运行dom-repeat。 如此说来,dom-repeat完成后,我的代码无法按我的要求工作。 在dom-repeat运行完成之后,我需要获取组件b的长度: -拿长并将其放在A部分的柜台中 -将所有分量b分成6组,每组1格

我在小提琴中制作了一些JQuery代码,并将其放到下面,这适用于默认div,但是当我放入我的聚合物元素的ready方法返回0时,不等待dom-repeat结束。我尝试了setTimeout,但是也没有用。

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

在这里,我将介绍现在的工作方式。 组件a具有显示计数器的属性。

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

这是Firefox中显示的结果。 初始化计数 卡数:0 列表:0

但是我的Array有24张卡,而该jQuery代码将是4张列表

0 个答案:

没有答案