Asked By: Anonymous
I’m trying to create a new element and I would like to bind data from outside the element, with iron-ajax. I’ve done something like
<iron-ajax ... last-response="{{myval}}"></iron-ajax>
<my-elem values="{{myval}}"></my-elem>
my problem is (and it’s been several hours(days?) I’m trying to find the problem/solution) my element is getting {{myval}}
(string, even if I set the property type to Object)
instead of the content of the json I get from iron-ajax, I’m pretty lost right now..
the demo code is here, the code of my element is here but I suspect my problem is really in the demo and not in the element.
I’ve seen this way of doing in polycast 26, but the difference is Rob is doing that inside an element, I do not since my element should get the data (the element is not in charge to download it).
Does someone has an advice about that ?
PS: I tried to have a different name than values, but it does not change anything, I also tried to change the function name from attached to something else,if this cause a problem, it’s not about that.
Solution
Answered By: Anonymous
Data binding between elements only works within a Polymer element’s local DOM or the special dom-bind
template element created for this purpose.
Your example code:
<demo-snippet>
<template>
<iron-ajax auto url="/demo/d1.json" handle-as="json" last-response="{{myval}}"></iron-ajax>
<d3spark-element yleg="Watt" ymax="2000" values="{{myval}}"></d3spark-element>
</template>
</demo-snippet>
Should work as only:
<template is="dom-bind">
<iron-ajax last-response="{{myval}}"...
<d3spark-element values="[[myval]]"...
</template>
I don’t think you can supply “content” nodes within demo-snippet
and expect data binding to work between them.