0

我在 Polymer 2 中创建了新组件，在其中我将使用 2 个 Web 组件，组件 a 用于显示 div 的名称和组件 b 的长度，它们将在此 Web 组件内运行 dom-repeat。话虽如此，在 dom-repeat 完成后，我的代码无法按我想要的方式工作。在 dom-repeat 运行完成后，我需要获取组件 b 的长度： - 获取长度并将我的计数器放入组件 a - 将所有组件 b 分成 6 个一组在一个 div 中

我在小提琴中制作了一些 JQuery 代码，并将放在下面，这适用于默认 div，但是当我放入我的聚合物元素的准备方法时返回 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

但是我的数组有 24 张卡片，使用该 jquery 代码将是 4 个列表

4

0 回答 0