聚合物.达特铁.不与选定的物品结合的清单
聚合物.达特铁.不与选定的物品结合的清单
提问于 2017-02-10 08:13:44
这是代码的一个子集，使用<iron-list>与：
HTML
<iron-list selected-item="{{selectedItem}}" selection-enabled>
<template is="dom-repeat" items="{{inputs}}">
[[item.name]]
</template>
</iron-list>
{{selectedItem}}Dart
class className extends PolymerElement {
@property var selectedItems;
@property List inputs = new List.from([{"name": "fred"}]);
}在选择时，selectedItem应该具有所选项的值，但它仍然是null。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-10 14:23:43
<iron-list>的轻型DOM不应该是项的列表，而应该是一个单一的基本DOM (不是dom-repeat、dom-if等)，它为每个项指定所需的DOM：
<iron-list ...>
<template>
...
</template>
</iron-list>轻型DOM不能成为文本节点：
<iron-list ...>
<template>
<!-- Cannot be a text node like this -->
<!-- [[item.name]] -->
<div>[[item.name]]</div>
</template>
</iron-list>项数组数据应该绑定到<iron-list>.items。
<iron-list items="[[items]]" ...>总之，它应该看起来类似于这样：
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: () => [{name: 'Fred'}, {name: 'John'}]
}
},
_computeClass: function(isSelected) {
return isSelected ? 'selected' : '';
}
});
});<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-list/iron-list.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
iron-list {
height: 50px;
}
.item.selected {
background: lightblue;
font-weight: bold;
}
</style>
<iron-list items="[[items]]" selection-enabled selected-item="{{selectedItem}}">
<template>
<div class$="item [[_computeClass(selected)]]">[[item.name]]</div>
</template>
</iron-list>
<h1>selected name: [[selectedItem.name]]</h1>
</template>
</dom-module>
</body>
码页
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42154505
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号