Question

我有一个问题，理解Polymer 1.0如何处理声明的属性，特别是那些类型为＆＃34; object＆＃34;的属性。为了解决这个问题，我试图创建一个简单的元素来选择材料类型并显示它的相关信息。

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

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

铁选择器应允许用户选择材料，然后在h1中显示材料名称，并在li中显示颜色和价格。

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

我的素材对象格式正确吗？如果不是它应该怎么样？（我知道这不是因为＆＃34; {＆＃34;＆＃34;值：＆＃34;）之后引发的控制台错误。
我的绑定是否设置正确？如果不是应该如何设置？

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，这可能是平台的奥秘。通过在display: block样式中加入:host，您也可以解决此问题。

如何使用type =＆＃34; object＆＃34;声明和绑定到属性在Polymer 1.0中

1 个答案: