个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 10:37:50 25 4
gpt4 key购买 nike

有人成功地使用了铁列表中的插槽吗？

我可以让 dom 元素显示在插槽中，但不知道如何执行数据绑定(bind)部分。我正在用一些元素填充槽，这些元素通过数据绑定(bind)引用 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>

最佳答案

iron-list克隆<template> ，您无法克隆 <slot> 。异常(exception)情况是使用 <slot>作为模板，如下所示:

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

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

关于Polymer 2.x 铁列表插槽和数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46652369/

25 4 0
文章推荐： CakePHP - $this->数据在 Model::save 之前消失
文章推荐： c++ - 使用 ESP8266/8285 将字符串从 Web 服务器转换为字节数组
文章推荐： c++ - 将 Dart 中的 ByteData 转换为 C++ 中的 unsigned char* 的有效方法？
文章推荐： android - windowSoftInputMode ="adjustPan|adjustResize"无法与 coordinatorlayout 一起使用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com