How to declare and bind to properties with type=“o

Question

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>

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. Is my material object formatted correctly? If not how should it look? ( I know it isn't because of console errors being thrown for the "{" after "value:")
2. Are my bindings set correctly? If not how should it be set up?

Answer 1

You have a series of problems here.

First,

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

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

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.

Here is an implementation:

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

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.