如何将纸张切换按钮绑定到Polymer中的布尔值 [英] How to bind paper-toggle-button to a Boolean in Polymer
本文介绍了如何将纸张切换按钮绑定到Polymer中的布尔值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我很想将纸张切换按钮绑定到布尔值,但它不起作用。我已经尝试使用 $ =
绑定并使用进行评估?=
。
我想显示用户 isActive
。
I'm triyng to bind a paper-toggle-button to a boolean but it's not working. I already tried binding with $=
and evaluating with ?=
.
I want to show if the user isActive
.
<template is="dom-repeat" items={{users}}>
<button class="heading" aria-expanded$="[[isExpanded(opened{{index}})]]" aria-controls="collapse{{index}}" onclick="toggle('#collapse{{index}}')" >{{item.firstName}} {{item.lastName}}<paper-toggle-button style="float: right;" checked$="{{item.isActive}}">Activo</paper-toggle-button></button>
<iron-collapse id="collapse{{index}}" tabindex="0" opened?="{{opened{{index}}}}">
<div class="content horizontal layout">
<div class="flex-1">
<paper-item>
<paper-item-body two-line>
<div>Email</div>
<div secondary>{{item.email}}</div>
</paper-item-body>
</paper-item>
<paper-item>
<paper-item-body two-line>
<div>Teléfono</div>
<div secondary>{{item.phone}}</div>
</paper-item-body>
</paper-item>
<paper-item>
<paper-item-body two-line>
<div>Género</div>
<div secondary>{{item.gender}}</div>
</paper-item-body>
</paper-item>
</div>
</div>
</div>
</iron-collapse>
</template>
JS:
ready: function() {
this.users = [
{firstName: 'Pedro', lastName: 'Vargas', email: 'pedro@mail.com', phone:'(222) 212 12 12', gender: 'Masculino', isActive:'true'},
{firstName: 'Andrea', lastName: 'Vargas', email: 'andrea@mail.com', phone:'(222) 212 12 13', gender: 'Femenino', isActive:'false'},
{firstName: 'Juan', lastName: 'Martínez', email: 'juan@mail.com', phone:'(222) 212 12 12', gender: 'Masculino', isActive:'true'},
];}
function toggle(selector) {
document.querySelector(selector).toggle();
}
document.querySelector('template[is=dom-repeat]').isExpanded = function(opened) {
return String(opened);
};
推荐答案
问题在于您的阵列。所有 isActive
对象都用引号括起来,这使它们成为一个字符串。
The problem is with your array. All of the isActive
objects are wrapped in quotes which makes them a string.
你想让它们成为一个布尔值所以删除引号:
You want to make them a boolean so remove the quotes:
{
firstName: 'Pedro',
lastName: 'Vargas',
email: 'pedro@mail.com',
phone: '(222) 212 12 12',
gender: 'Masculino',
isActive: true
}
这篇关于如何将纸张切换按钮绑定到Polymer中的布尔值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文