Berkay Yildiz Berkay Yildiz - 7 days ago 10
Javascript Question

Polymer dynamic disable inside dom-repeat

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

Answer

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.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.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">
</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}}" class="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

Comments