gpt4 book ai didi

Polymer-Dart Iron-list 未绑定(bind)到选定项目

转载 作者:行者123 更新时间:2023-12-03 04:17:00 24 4
gpt4 key购买 nike

这是代码的子集,使用 <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 .

最佳答案

<iron-list> 的轻 DOM不应该是项目列表,而是单个基数 <template> (不是 dom-repeatdom-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>

项目数组数据应绑定(bind)到 <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>


codepen

关于Polymer-Dart Iron-list 未绑定(bind)到选定项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42154505/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com