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

debugcn 发表于 Dev

伯凯·耶尔迪兹

我想根据variants变量将纸张项设置为禁用或激活。我曾经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"}
            ]
        }
    }
});

托尼19

您可以使用仅在is时返回的计算绑定：truestatusdisabled

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

码笔

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。