如何在 Polymer 1.0 中声明和绑定 type="object" 的属性

Question

我在理解 Polymer 1.0 如何处理声明的属性时遇到问题，特别是那些 type="object" 的属性。为了弄清楚这一点，我正在尝试创建一个简单的元素来选择材料类型并显示有关它的内容。

这是我的元素到目前为止的样子

    <dom-module id="mat-panel">
    <style>
      :host {
        background: blue;
      }

    </style>
  <template>
        <iron-selector attr-for-selected="name" selected="{{material}}">
      <div name="polyester">Polyester</div>
      <div name="nylon">Nylon</div>
      <div name="polypropylene">Polypropylene</div>
      <div name="kevlar">Kevlar</div>
    </iron-selector>
    <h1>{{material}}</h1>
      <ul>
        <li>{{material.color}}</li>
        <li>{{material.price}}</li>
      </ul>
  </template>
</dom-module>
  <script>
  (function() {
    Polymer({
      is: 'mat-panel',

      properties: {
        material: {
          type: Object,
          notify: true;
          value:{
            kevlar: {
              color: 'red'
              price: 1.25
            },
            nylon: {
              color: 'black'
              price: 2.50
            },
            polypropylene: {
              color: 'green'
              price: 3.15
            },
            polyester: {
              color: 'purple'
              price: 4.25
            }
          } 
        }
      }
    });
    })();
  </script>

Iron-selector 应该允许用户选择一种材料，然后在 h1 中显示材料名称，在 li 中显示颜色和价格。

所以我需要知道的两件事是：

1. 我的材质对象的格式是否正确？如果不是，它应该怎么看？ （我知道这不是因为在“value:”之后为“{”引发了控制台错误）
2. 我的绑定设置是否正确？如果不是应该如何设置？

Answer 1

你这里有一系列问题。

首先，

        kevlar: {
          color: 'red'
          price: 1.25
        },

^ 这是不正确的对象语法，名称/值对必须用逗号分隔。

其次，您的代码期望属性material 是三样东西。 material 绑定到iron-selector.selected，这使它成为所选材料的名称。但是，您还希望 material 是一个数据对象（具有 color 和 price 属性的事物）。最后，您将material 定义为您的材质对象数据库。您必须将材质列表、所选材质的名称和所选材质对象分开。

这是一个实现：

<dom-module id="mat-panel">
  <style>
    :host {
      display: block;
      background: lightblue;
    }
  </style>

  <template>
    <iron-selector attr-for-selected="name" selected="{{name}}">
      <div name="polyester">Polyester</div>
      <div name="nylon">Nylon</div>
      <div name="polypropylene">Polypropylene</div>
      <div name="kevlar">Kevlar</div>
    </iron-selector>
    <h1>{{name}}</h1>
    <ul>
      <li>{{material.color}}</li>
      <li>{{material.price}}</li>
    </ul>
  </template>

  <script>
    Polymer({
      is: 'mat-panel',
      properties: {
        materials: {
          value: {
            kevlar: {
              color: 'red',
              price: 1.25
            },
            nylon: {
              color: 'black',
              price: 2.50
            },
            polypropylene: {
              color: 'green',
              price: 3.15
            },
            polyester: {
              color: 'purple',
              price: 4.25
            }
          }
        },
        material: {
          computed: '_computeMaterial(materials, name)'
        }
      },
      _computeMaterial: function(materials, name) {
        return materials[name];
      }
    });
  </script>
</dom-module>

这是偶然的，但您设置的background 颜色不会显示，因为所有元素都默认为display: inline，这很遗憾是平台奥秘。通过在您的:host 样式中包含display: block，您也可以解决此问题。