I've got a Polymer app running an iron-ajax call to a service that returns a json string:
{
"name": "John"
}
The Polymer code on the main page is:
<link rel="import" href="/elements/my-form.html">
<dom-module id="my-app">
<template>
...
<iron-ajax auto url="/grabData" handle-as="json" last-response="{{data}}"></iron-ajax>
<iron-label>
From iron-ajax = {{data.name}}
</iron-label>
<my-form></my-form>
...
"my-form" is:
<link rel="import" href="/my-name.html">
<dom-module id="my-form">
<template>
<my-name></my-name>
</template>
<script>
Polymer({
is: 'my-form'
});
</script>
</dom-module>
And "my-name" is:
<dom-module id="my-name">
<template>
<iron-label>
From my-name = {{data.name}}
</iron-label>
</template>
<script>
Polymer({
is: 'my-name'
});
</script>
</dom-module>
When run, "From iron-ajax = John", and "From my-name =".
While I could use a single ajax call within my-name, I'd don't want to do this for every custom element. I'd rather acquire my data in one call and have custom elements access the returned data.
How do I acquire 'name' within my-name without passing the value through the my-form element?
--- Update ---
For a little more clarity on desired outcomes, here's a little more info.
Ultimately I'd like to acquire a very large JSON string with multiple entries:
{
"name": "John",
"address": [{
"street" : "14 Baker Street",
"city" : "somewhereville"
}],
"phone": "123-1234"
...
}
And have custom elements handle each entry:
<dom-module id="my-form">
<template>
<my-name></my-name>
<my-address></my-address>
<my-phone></my-phone>
...
</template>