聚合物2.x铁表插槽和数据绑定
[英]Polymer 2.x iron-list slots and data binding
问题描述
Has anyone had any success with using a slot in an iron-list? 
有人在铁器清单上使用插槽有成功吗？
I can get the dom elements to show up in the slot but can't figure out how to do the data binding part. 我可以将dom元素显示在插槽中，但无法弄清楚如何执行数据绑定部分。 I am filling the slot with some elements that refer to the iron-list's item property with data bindings. 我用一些元素填充了插槽，这些元素通过数据绑定引用了铁列表的item属性。
Example: 例：
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>
use of component: 使用组件：
<!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 个解决方案
解决方案1
2 2017-10-09 20:06:26
iron-list clones the <template> , you cannot clone <slot> . iron-list克隆<template> ，您不能克隆<slot> 。 The exception is using <slot> as a template, like so: 例外是使用<slot>作为模板，如下所示：
<iron-list items="[[data]]">
<slot></slot>
</iron-list>
<custom-element>
<template>
...
</template>
</custom-element>
解决方案2
1 2017-10-09 20:10:03
Try this: 尝试这个：
<dom-module id="component-with-list">
<template>
<iron-list items="{{listData}}" as="item">
<slot></slot>
</iron-list>
</template>
<script>...</script>
</dom-module>
Usage: 用法：
<!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>
I think the problem should be fix with this. 我认为问题应该得到解决。
解决方案3
1 2018-08-07 18:21:56
So, what you are looking to do won't work, as the slotted content will be assembled with the context of the source component. 因此，您要执行的操作将不起作用，因为插入的内容将与源组件的上下文组合在一起。
In main-document-element you have: 在main-document-element您具有：
<component-with-list list-data="[[someData]]">
<div slot="listitem">[[item.description]]</div>
</component-with-list>
But the expression [[item.description]] will be evaluated within the main-document-element, rather than within the template block in the iron list. 但是表达式[[item.description]]将在主文档元素内而不是在铁清单的模板块内求值。
Long answer 长答案
Slots are provided by a component as designated content-insertion locations. 插槽由组件提供，作为指定的内容插入位置。 You can think of these as open cubbies, which can hold whatever an outside component places within them. 您可以将它们视为开放式隔间，它们可以容纳其中放置的任何外部组件。
Content passed to a slot is rendered as-is by the receiving component. 传递到插槽的内容由接收组件按原样呈现。 A component passing content featuring polymer-bindings, to a slot in another component, will actually see that content assembled with its own (source) context, rather than that of the receiving (destination) component. 一个组件将具有聚合物绑定的内容传递到另一个组件中的插槽，则该组件实际上将看到该内容是通过其自身的 （源）上下文而不是接收（目标）组件的上下文组装而成的。
So, for your example, since item is undefiend in main-document-element , it will output an empty string into the div, and pass it off to the slot in the iron-list template. 因此，以您的示例为例，由于item在main-document-element是undefiend，因此它将在div中输出一个空字符串，并将其传递给iron-list模板中的插槽。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.