Binding multiple values in an array property in Polymer

Question

I would like to bind multiple values to an array property in a Polymer component.

Looking for something like the following, where I'm getting the values of object1 and object2 from a two-way binding with first-element and second-element respectively, and would like third-element to receive both of those as an array, passed into object-array (obviously this doesn't work, but that's why I'm asking):

<!-- inside parent component definition -->

<first-element object='{{object1}}'></first-element>
<second-element object='{{object2}}'></second-element>

<!-- this is the syntax I thought might work -->
<third-element object-array='[ [[object1]], [[object2]] ]'></third-element>

I'm trying to avoid having to make a computed property to pass into object-array. Is something like this possible, or is it necessary to make the object array a separate property?

Answer 1

The simplest way I can think of if you do not want to use computed properties is to use computed bindings, although it's almost the same:

<third-element object-array="[[retArr(object1, object2)]]"></third-element>

and have a one liner method for it:

retArr(a,b) {return [a,b]}

Answer 2

No, bindings are rather simple in Polymer. You already provided your other options, another option still is to set two as property/properties:

this.shadowRoot.querySelector('third-element').objectArray = [object1,object2];

Complex objects through parameters is not recommended in Polymer, use properties for those cases.