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

Question

我在理解 Polymer 1.0 如何处理声明的属性时遇到问题，特别是那些类型为 "object" 的属性。为了解决这个问题，我正在尝试为 select 创建一个 material 类型的简单元素并显示有关它的内容。

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

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

铁-select或者应该允许用户select一个material然后在h1中显示material名称，在h1中显示颜色和价格李氏。

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

我的 material 对象格式是否正确？如果不是应该怎么看？（我知道这不是因为 "value:" 之后的“{”抛出了控制台错误）
我的绑定设置正确吗？如果不是应该怎么设置？

Answer 1

你这里有一系列的问题。

首先，

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

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

其次，您的代码期望属性 material 是三件事。 material 绑定到 iron-selector.selected，这使其成为所选 material 的名称。但是，您还希望 material 成为数据对象（具有 color 和 price 属性的对象）。最后，您将 material 定义为 material 对象的数据库。您必须分隔 material 列表、所选 material 的名称和所选 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，您也可以解决此问题。

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

How to declare and bind to properties with type="object" in Polymer 1.0

json

polymer

polymer-1.0