聚合物2.x iron-list插槽和数据绑定
有没有人成功地使用了铁质列表中的一个槽？
我可以让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>回答 3
Stack Overflow用户
发布于 2017-10-10 04:06:27
iron-list克隆<template>，则不能克隆<slot>。例外情况是使用<slot>作为模板，如下所示：
<iron-list items="[[data]]">
<slot></slot>
</iron-list>
<custom-element>
<template>
...
</template>
</custom-element>Stack Overflow用户
发布于 2018-08-08 02:21:57
因此，您想要做的事情将不起作用，因为分槽的内容将与源组件的上下文组装在一起。
在main-document-element中，您可以：
<component-with-list list-data="[[someData]]">
<div slot="listitem">[[item.description]]</div>
</component-with-list>但是表达式[item.description]将在main-document-element中求值，而不是在iron列表中的模板块中求值。
Long answer
插槽由组件提供，作为指定的内容插入位置。您可以将它们看作是开放的小隔间，它可以容纳外部组件放置在其中的任何内容。
传递到插槽的内容由接收组件按原样呈现。一个组件将具有聚合物绑定特征的内容传递到另一个组件中的插槽，实际上将看到该内容与其自己的(源)上下文组装在一起，而不是与接收(目标)组件的上下文组装在一起。
因此，对于您的示例，由于item在main-document-element中是undefiend的，因此它将输出一个空字符串到iron-list中，并将其传递给div模板中的插槽。
Stack Overflow用户
发布于 2017-10-10 04:10:04
试试这个：
<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>我认为这个问题应该得到解决。
https://stackoverflow.com/questions/46652369
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号