Initialize a polymer sub-element from an object literal

Question

I'd like to be able to initialize a polymer sub-element from an object literal property of the parent-element.

That means syntax like the following:

<dom-module id="parent-element">
    <template>
        <child-element properties={{item}}></child-element>
    </template>
</dom-module>

rather than:

<child-element property1="{{item.property1}}" property2="{{item.property2}}" ...></child-element>

Is there an easy way to do this?

Answer 1

You can create an object in your child element, observe for this changes and distribute the values to other properties.

is="child-element",
properties: {
  property1: String,
  property2: String,
  consolidated: {
    type: Object,
    observer: '_propertyChange'
},
_propertyChange: function(newValue) {
  if (newValue.property1 && newValue.property1 !== this.property1) {
    this.property1 = newValue.property1;
  }
  if (newValue.property2 && newValue.property2 !== this.property2) {
    this.property2 = newValue.property2;
  }
}

In the parent elment assign the items to consolidated property

<dom-module id="parent-element">
    <template>
        <child-element consolidated={{item}}></child-element>
    </template>
</dom-module>