I have a custom element, x-custom
, that has a property, object
, that is an Object.
I have another property, name
, that I want to use to index object
, to put data from other custom elements under a specific property of object
.
Something like the following is the end goal:
<other-custom-element data="{{object.{{name}}}}"></other-custom-element>
...
name: {
type: String,
},
object: {
type: Object,
value: {}
}
So, in the example, if the value of name
is "prop1", then the data from other-custom-element
would be placed into object.prop1
.
EDIT:
So, I've updated my code and have gotten a bit closer, but still not quite all the way. The following example code is much closer to my actual code, so maybe it'll help in answering the question:
<template is="dom-repeat" items="[[locations]]" as="location">
<get-data-at-location
location="[[location]]"
data="[[_resolveRef(location)]]">
</get-data-at-location>
<h5>Data at location: [[location]]</h5>
<template is="dom-repeat" items="[[_resolveRef(location)]]" as="data">
<p>Data: {{data.value}}</p>
<p>Time: {{data.time}}</p>
</template>
</template>
...
alldata: {
type: Object
value: {}
},
_resolveRef: function(location) {
return this.alldata[location];
}
I'm trying to basically pass a reference to a specific element of alldata
with _resolveRef()
, but I think there may be a scoping issue. I get the following error (say, if location
is equal to "some_location"):
Uncaught TypeError: Cannot read property 'some_location' of undefined
So, for some reason it doesn't seem to know about "alldata", even though it is a property of the custom element. Hopefully that's enough for a Polymer whiz to help :)
EDIT 2:
Some sample data to make the final goal more clear.
Say that locations is an array consisting of the following strings:
locations: {
type: Array,
value: ['location1', 'location2']
}
And say that the <get-data-at-location>
element returns the following data for each individual location:
<get-data-at-location
location=[[location]] //'location1'
data={{}}> //[{value: 4, time: 0}, {value: 5, time: 1}]
</get-data-at-location>
<get-data-at-location
location=[[location]] //'location2'
data={{}}> //[{value: 10, time: 1}, {value: 11, time: 2}]
</get-data-at-location>
After all is said and done, I would like alldata
to have the following information:
alldata: {
location1: [{value: 4, time: 0}, {value: 5, time: 1}],
location2: [{value: 10, time: 1}, {value: 11, time: 2}]
}
So, I would like the object alldata
shared across all instances of the dom-repeat so that they can all place data into their respective property (which is just the string value of location) of the overall object.
EDIT 3:
Tried something new. Rather than _resolveRef(location)
as a way to return a pointer to the location where <get-data-from-location>
should store the data that it gets, I just used the following syntax: {{alldata[location]}}
and things worked better, but still not perfect.
<template is="dom-repeat" items="[[locations]]" as="location">
<get-data-at-location
location="[[location]]"
data="{{alldata[location]}}">
</get-data-at-location>
<h5>Data at location: [[location]]</h5>
<template is="dom-repeat" items="{{alldata[location]}}" as="data">
<p>Data: {{data.value}}</p>
<p>Time: {{data.time}}</p>
</template>
</template>
...
alldata: {
type: Object
value: {}
}
So, this appears to work! Until I realized that the alldata
that the data is being bound to is not the alldata
of the custom element - it appears to be bound to the scope of the first dom-repeat
, which the second dom-repeat
has access to.
So basically, if I was to use this custom element within another page and bind to alldata
, it doesn't work:
<x-custom alldata={{allData}}></x-custom>
<x-pretty-json object={{allData}}></x-pretty-json>
<x-pretty-json>
just pretty-prints the provided object, and in this case it just prints empty brackets {}
. So, closer (kind of), but still not quite there.