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

【问题标题】：Polymer 2.x iron-list slots and data bindingPolymer 2.x 铁列表插槽和数据绑定
【发布时间】：2018-03-21 00:18:10
【问题描述】：

有没有人成功地在铁名单中使用了一个插槽？

我可以让 dom 元素显示在插槽中，但不知道如何执行数据绑定部分。我正在使用一些元素来填充插槽，这些元素通过数据绑定引用 Iron-list 的 item 属性。

例子：

组件列表：

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

【问题讨论】：

标签： polymer polymer-2.x

【解决方案1】：

iron-list 克隆<template>，你不能克隆<slot>。例外是使用<slot> 作为模板，如下所示：

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

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

【讨论】：

【解决方案2】：

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

在main-document-element 你有：

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

但是表达式 [[item.description]] 将在主文档元素内进行计算，而不是在铁列表中的模板块内。

长答案

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

传递给插槽的内容由接收组件按原样呈现。将具有聚合物绑定的内容传递到另一个组件中的插槽的组件实际上会看到该内容与其自己的（源）上下文组装在一起，而不是接收（目标）组件的组装。

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

【讨论】：

【解决方案3】：

试试这个：

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

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

【讨论】：