如何声明和绑定到类型为"object"的属性.在Polymer 1.0中 [英] How to declare and bind to properties with type="object" in Polymer 1.0

问题描述

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

I'm having an issue understanding how Polymer 1.0 handles declared properties, specifically those with the type="object". In order to figure this out I am trying to create a simple element to select a material type and display things about it.

到目前为止，这是我的情况

Here is what my element looks like so far

    <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的位置显示颜色和价格.

Iron-selector should allow the user to select a material and then display the material name in the h1, and the color and prices in the li's.

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

So the two things I need to know are:

1. 我的物质对象格式正确吗?如果不是，应该怎么看? (我知道这不是因为在值:"之后的"{"后面引发了控制台错误)
2. 绑定设置是否正确?如果没有，应该如何设置?

推荐答案

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

You have a series of problems here.

首先

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

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

^ this is improper object syntax, name/value pairs must be separated with commas.

第二，您的代码期望属性material是三件事. material绑定到iron-selector.selected，这使其成为所选材料的名称.但是，您还希望material是数据对象(具有color和price属性的东西).最后，将material定义为材料对象数据库.您必须分隔物料列表，所选物料的名称和所选物料对象.

Second, your code expects the property material to be three things. material is bound to iron-selector.selected which makes it the name of the selected material. However, you also expect material to be a data object (the thing with color and price properties). Lastly, you define material to be your database of material objects. You must separate the list of materials, the name of the selected material, and the selected material object.

这是一个实现:

<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，您也可以解决此问题.

This is incidental, but the background color you set won't display because all elements default to display: inline which is sadly platform arcana. By including display: block in your :host style, you can fix this problem too.

这篇关于如何声明和绑定到类型为"object"的属性.在Polymer 1.0中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！