dom-repeat 内的聚合物动态禁用

Question

我想根据 variants 变量将 paper-item 设置为禁用或激活。我使用 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"}
            ]
        }
    }
});

Answer 1

只有当 status 为 disabled 时，您才可以使用 computed binding returns true:

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

dom-repeat 内的聚合物动态禁用

Polymer dynamic disable inside dom-repeat

javascript

polymer

polymer-1.0