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

Question

I have a problem understanding how Polymer 1.0 handles declared properties, especially those that have type = "object". To understand this, I am trying to create a simple element to select the type of material and display information about it.

Here is what my item still looks like

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

The iron selector should allow the user to select the material, and then display the name of the material in h1, as well as the color and prices in whether.

So, I need to know two things:

• Is my material object formatted correctly? If not, how should it look? (I know that this is not due to console errors that cause for "{" after "value:")
• Are my bindings set correctly? If not, how can I configure it?

Answer 1

You have a number of problems here.

Firstly,

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

^ This is an improper syntax for the object; name / value pairs must be separated by commas.

Secondly, your code expects the material property to consist of three things. material bound to iron-selector.selected , which makes it the name of the selected material. However, you also expect material be a data object (thing with color and price properties). Finally, you define material as 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 the 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 random, but the background color that you set will not be displayed, because all elements are by default equal to display: inline , which is a sad platform. By including display: block in your :host style, you can also fix this problem.