Polymer 聚合物2.x铁名单插槽和数据绑定_Polymer_Polymer 2.x

Polymer 聚合物2.x铁名单插槽和数据绑定

polymer

Polymer 聚合物2.x铁名单插槽和数据绑定,polymer,polymer-2.x,Polymer,Polymer 2.x,有没有人成功地使用了铁名单中的一个插槽我可以让dom元素显示在插槽中，但不知道如何执行数据绑定部分。我正在用一些元素填充这个槽，这些元素通过数据绑定引用了iron list的item属性例如：具有列表的组件： [[项目名称]] 类ComponentWithList扩展了Polymer.Element{ 静态get是（）{ 返回“具有列表的组件” } 静态获取属性（）{ 返回{ 列表数据：{ 类型：数组 } } } } 定义（ComponentWithList.is，ComponentW

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

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

例如：

具有列表的组件：


[[项目名称]]
类ComponentWithList扩展了Polymer.Element{
静态get是（）{
返回“具有列表的组件”
}
静态获取属性（）{
返回{
列表数据：{
类型：数组
}
}
}
}
定义（ComponentWithList.is，ComponentWithList）；

组件的使用：

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


带绑定槽的铁制列表
具有具有数据绑定的插槽的铁名单
[[项目说明]]
HTMLImports.whenReady（函数（）{
类MainDocumentElement扩展了Polymer.Element{
静态get是（）{return'main document element'；}
静态获取属性（）{
返回{
一些数据：{
类型：数组，
通知：正确，
值：函数（）{
返回[
{
名称：“项目1”，
说明：“第一项”
},
{
名称：“项目2”，
说明：“第二项”
}
];
}
}
}
}
}
window.customElements.define（MainDocumentElement.is，MainDocumentElement）；
});

铁名单

克隆

，不能克隆

。例外情况是使用

作为模板，如下所示：

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

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

...

试试这个：

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


带绑定槽的铁制列表
具有具有数据绑定的插槽的铁名单
[[listData.name]]
[[listData.description]]
...

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

因此，您所要做的不会起作用，因为时隙内容将与源组件的上下文组合在一起

在

主文档元素中

有：

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


[[项目说明]]

但是表达式[[item.description]]将在主文档元素中求值，而不是在铁链表的模板块中求值

长答案

插槽由组件作为指定的内容插入位置提供。你可以把它们想象成开放式的小隔间，里面可以放任何外部组件

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

因此，对于您的示例，由于项目在

主文档元素

中未定义，它将向div输出一个空字符串，并将其传递到

铁名单

模板中的插槽

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