聚合物2.x铁表插槽和数据绑定 [英] Polymer 2.x iron-list slots and data binding
本文介绍了聚合物2.x铁表插槽和数据绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在铁名单上使用插槽是否有人成功?
Has anyone had any success with using a slot in an iron-list?
我可以将dom元素显示在插槽中，但无法弄清楚如何执行数据绑定部分.我用一些元素来填充插槽，这些元素使用数据绑定来引用铁列表的item属性.
I can get the dom elements to show up in the slot but can't figure out how to do the data binding part. I am filling the slot with some elements that refer to the iron-list's item property with data bindings.
示例:
组件列表:
component-with-list:
<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>.
例外是使用<slot>作为模板，如下所示:
iron-list clones the <template>, you cannot clone <slot>.
The exception is using <slot> as a template, like so:
<iron-list items="[[data]]">
<slot></slot>
</iron-list>
<custom-element>
<template>
...
</template>
</custom-element>
这篇关于聚合物2.x铁表插槽和数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
