我想根据variants变量将纸张项设置为禁用或激活。我用dom-repeat列出了纸质物品。 disabled属性可以用于此目的，但是不能像以下这样设置：disabled="true"或disabled="false"。
我怎样才能做到这一点？
<paper-listbox attr-for-selected="itemID" selected="{{item.id}}" class="dropdown-content">
<template is="dom-repeat" items="[[variants]]">
<paper-item itemID$="[[item.id]]">[[item.value]]</paper-item>
</template>
</paper-listbox>
Polymer({
is: 'item-create',
properties: {
variants: {
type: Array,
value: [
{id: 1, value: "Color", status: "disabled"},
{id: 2, value: "Number", status: "active"}
]
}
}
});
最佳答案
您可以使用仅在true为status时返回disabled的computed binding：
// template
<paper-item disabled="[[_computeDisabled(item.status)]]">
// script
_computeDisabled: function(status) {
return status === 'disabled';
}
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
variants: {
type: Array,
value: () => [{
id: 1,
value: "Color",
status: "disabled"
}, {
id: 2,
value: "Number",
status: "active"
}]
}
},
_computeDisabled: function(status) {
return status === 'disabled';
}
});
});<head>
<base href="https://polygit.org/polymer+1.11.3/webcomponents+webcomponents+:v0/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<paper-dropdown-menu>
<paper-listbox attr-for-selected="item-id" selected="{{item.id}}" slot="dropdown-content">
<template is="dom-repeat" items="[[variants]]">
<paper-item item-id="[[item.id]]" disabled="[[_computeDisabled(item.status)]]">[[item.value]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
</body>codepen
关于javascript - dom-repeat内部的 polymer 动态禁用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40804143/