Polymer index property of type object with another property

问题

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.

来源：https://stackoverflow.com/questions/35001873/polymer-index-property-of-type-object-with-another-property

标签

polymer

polymer-1.0