如何将纸张切换按钮绑定到 Polymer 中的布尔值

Question

我正在尝试将纸张切换按钮绑定到布尔值，但它不起作用。我已经尝试使用 $= 进行绑定并使用 ?= 进行评估。我想显示用户 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);
};

Answer 1

问题出在你的阵列上。所有 isActive 对象都用引号括起来，使它们成为字符串。

您想将它们设为布尔值，因此请删除引号：

{
  firstName: 'Pedro',
  lastName: 'Vargas',
  email: 'pedro@mail.com',
  phone: '(222) 212 12 12',
  gender: 'Masculino',
  isActive: true
}

如何将纸张切换按钮绑定到 Polymer 中的布尔值

How to bind paper-toggle-button to a Boolean in Polymer

javascript

polymer-1.0