有人成功地使用了铁列表中的插槽吗？
我可以让 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/