如何 dom-repeat slot 内容答案

【问题标题】：How to dom-repeat slot content如何 dom-repeat slot 内容
【发布时间】：2020-02-17 13:01:04
【问题描述】：

我正在尝试创建一个可重复使用的列表，该列表将其行模板作为插槽传递，但插槽内容仅重复一次。此处示例：https://codepen.io/chris-gunawardena/project/editor/XkPYQw

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
<dom-module id="list-repeater">
  <template>
      <template is="dom-repeat" items="{{items}}" as="item">
        <li>
          # [[index]]:  [[item]] <slot name="row-template"></slot>
        </li>
    </template>
  </template>
  <script>
    class ListRepeater extends Polymer.Element {
      static get is() {
        return 'list-repeater';
      }
      static get properties() {
        return {
          items: Array,
        };
      }
    }
    customElements.define(ListRepeater.is, ListRepeater);
  </script>
</dom-module>

这样使用：

  <list-repeater items='["a","b"]'>
    <div slot="row-template">--slot content--</div>
  </list-repeater>

该功能类似于 Iron-list，它接受一个模板，但很难跟踪 Iron-list 正在做什么。

【问题讨论】：

Polymer.Templatizer : t-code.pl/blog/2015/08/polymer-templatizer

标签： javascript web-component polymer-2.x

【解决方案1】：

在您的情况下使用插槽将不起作用，iron-list 正在使用Templatizer Behavior 来实现此目的

Polymer.Templatizer 行为添加了生成模板实例的方法，每个模板实例由匿名 Polymer.PropertyEffects 实例管理，其中标记模板内容中的数据绑定是绑定到自身的访问器。

【讨论】：

谢谢，我试试再回帖

【解决方案2】：

我也遇到了同样的问题，我有一个解决方案，你可以试试这个，让我知道这是否适合你。这种方法使用了模板化器。

HTML：

<div id="you-component-list"><your-component></you-component><div>

JS：

在附加的方法中添加这一行：

attached() {
this.templatize(/** @type {!HTMLTemplateElement} **/ (
    this.$.'your-component-list'.querySelector('template')));},

const /** !Array */ flattenedNodes = Polymer.FlattenedNodesObserver.getFlattenedNodes(this); const distributedNodeToAppend = /** !Node */ flattenedNodes.find( (/** !Node */ node) => (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('slot'))); const clone = this.stamp({item: item}); if (distributedNodeToAppend) { const childNode = distributedNodeToAppend.cloneNode(true); childNode.removeAttribute('slot'); clone.root.querySelector('Your-component').appendChild(childNode); } Polymer.dom(this.$.'you-component-list').appendChild(clone.root);

【讨论】：