Polymer dynamic disable inside dom-repeat

Question

I want to set paper-item as disabled or active according to variants variable. I used dom-repeat to list paper-items. disabled property can be used for this, however it cannot set like these: disabled="true" or disabled="false".

How can I do this?

<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"}
            ]
        }
    }
});

tony19 tony19 · Accepted Answer · 2016-11-25T12:01:24

You could use a computed binding that returns true only when status is disabled:

// 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

Polymer dynamic disable inside dom-repeat

1 Answers