Question

是否可以将变量绑定到这些<paper-item-body>属性：two-line和three-line？

例如：

<paper-item>
  <paper-item-body {{item.lineCount}}>
    <div>Title</div>
    <div secondary>Description</div>
  </paper-item-body>
  <iron-icon></iron-icon>
</paper-item>

其中item.lineCount为'two-line'或'three-line'。

我在其他区域（即style$="color: {{myColor}};"）的目标属性上使用了数据绑定，但该方法似乎不适用于<paper-item-body>。

谢谢！

Answer 1

Attribute bindings（即，$=）绑定到布尔变量，其中属性在绑定值为true时设置，在false时删除。 / p>

假设item.enableTwoLines是一个布尔值，你就像这样绑定<paper-item-body>.twoLine：

<paper-item-body two-line$="[[item.enableTwoLines]]">
  ...
</paper-item-body>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-item/paper-item-body.html">
  <link rel="import" href="paper-checkbox/paper-checkbox.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-checkbox {
          margin: 20px;
        }
        paper-item-body {
          border: solid 1px red;
          --paper-item-body-two-line-min-height: 200px;
        }
      </style>
      <paper-checkbox active="{{enableTwoLine}}">Enable 2-line paper-item</paper-checkbox>
      <paper-item>
        <paper-item-body two-line$="[[enableTwoLine]]">
          <div>Profile Photo</div>
          <div secondary>Change your Google+ profile photo</div>
        </paper-item-body>
      </paper-item>
    </template>
  </dom-module>
</body>

codepen

将变量绑定到<paper-item-body>的属性

1 个答案: