2

我在理解 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. 我的绑定设置正确吗？如果不是应该如何设置？
4

1 回答 1

4

您在这里遇到了一系列问题。

第一的，

        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平台奥秘。通过包含display: block在您的:host风格中，您也可以解决此问题。

于 2015-06-11T16:24:37.097 回答