Question

有没有人在使用铁列表中的插槽方面取得任何成功？

我可以让dom元素显示在插槽中，但无法弄清楚如何处理数据绑定部分。我在插槽中填充了一些带有数据绑定的铁列表项属性的元素。

示例：

部件与 - 列表：

<dom-module id="component-with-list">
    <template>
        <iron-list items="{{listData}}" as="item">
            <template>
                <div>
                    <div>[[item.name]]</div>
                </div>
                <slot name="listitem"></slot>
            </template>
        </iron-list>
    </template>

    <script>
        class ComponentWithList extends Polymer.Element {

            static get is() {
                return 'component-with-list'
            }

            static get properties() {
                return {
                    listData: {
                        type: Array
                    }
                }
            }

        }
        customElements.define(ComponentWithList.is, ComponentWithList);
    </script>

</dom-module>

使用组件：

<!DOCTYPE html>
<html>
<head>
    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js">
    </script>
    <link rel="import" href="../../bower_components/polymer/polymer-element.html">
    <link rel="import" href="./component-with-list.html">
    <title>Iron-list with a slot with bindings</title>
</head>
<body>
<dom-module id="main-document-element">
    <template>
        <h1>Iron list with a slot that has data bindings</h1>
    <component-with-list list-data="[[someData]]">
        <div slot="listitem">[[item.description]]</div>
    </component-with-list>
</template>
<script>
    HTMLImports.whenReady(function() {
        class MainDocumentElement extends Polymer.Element {

            static get is() { return 'main-document-element'; }

            static get properties() {
                return {
                    someData: {
                        type: Array,
                        notify: true,
                        value: function() {
                            return [
                                {
                                    name: "Item1",
                                    description: "Item Number One"
                                },
                                {
                                    name: "Item2",
                                    description: "Item Number Two"
                                }
                            ];
                        }
                    }
                }
            }

        }
        window.customElements.define(MainDocumentElement.is, MainDocumentElement);
    });
</script>
</dom-module>
<main-document-element></main-document-element>
</body>
</html>

Answer 1

iron-list克隆<template>，无法克隆<slot>。例外情况是使用<slot>作为模板，如下所示：

<iron-list items="[[data]]">
    <slot></slot>
</iron-list>

<custom-element>
  <template>
      ...
  </template>
</custom-element>

Answer 2

试试这个：

<dom-module id="component-with-list">
    <template>
        <iron-list items="{{listData}}" as="item">
            <slot></slot>
        </iron-list>
    </template>
    <script>...</script>
</dom-module>

用法：

<!DOCTYPE html>
<html>
    <head>
        <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
        <link rel="import" href="../../bower_components/polymer/polymer-element.html">
        <link rel="import" href="./component-with-list.html">
        <title>Iron-list with a slot with bindings</title>
    </head>
    <body>
       <dom-module id="main-document-element">
          <template>
              <h1>Iron list with a slot that has data bindings</h1>
              <component-with-list list-data="[[someData]]">
                  <div>
                      <div>[[listData.name]]</div>
                  </div>
                  <div>[[listData.description]]</div>
              </component-with-list>
          </template>
          <script>...</script>
       </dom-module>
     </body>
</html>

我认为应该解决这个问题。

Answer 3

因此，您要执行的操作将不起作用，因为插入的内容将与源组件的上下文组合在一起。

在main-document-element中，您拥有：

    <component-with-list list-data="[[someData]]">
        <div slot="listitem">[[item.description]]</div>
    </component-with-list>

但是表达式[[item.description]]将在主文档元素内而不是在铁清单的模板块内求值。

好答案

插槽由组件提供，作为指定的内容插入位置。您可以将它们视为开放式小隔间，它们可以容纳其中放置的任何外部组件。

传递到插槽的内容由接收组件按原样呈现。一个将具有聚合物绑定内容的组件传递到另一个组件中的插槽的组件实际上将看到该内容是通过其 own （源）上下文而不是接收（目标）组件进行组装的。 >

因此，在您的示例中，由于item在main-document-element中是未定义的，因此它将在div中输出一个空字符串，并将其传递给iron-list模板中的插槽。

Polymer 2.x铁列表插槽和数据绑定

3 个答案: