Question

我想根据dom-repeat变量将paper-item设置为disabled或active。我使用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"}
            ]
        }
    }
});

{{1}}

Answer 1

只有当true为status时，您才能使用仅返回disabled的{{3}}：

// template
<paper-item disabled="[[_computeDisabled(item.status)]]">

// script
_computeDisabled: function(status) {
  return status === 'disabled';
}

＆＃13;

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';
    }
  });
});

＆＃13;

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

＆＃13;

computed binding

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

1 个答案: