Data binding/updating between parent and child using tag in Polymer1.0

Question

I have a slider element that contains list of slides and a img to show hovered slide as shown below. I am binding currentImage between custom

Answer 1

Here is a fork of your current plunkr. I've made two changes to it.

• Engulfed index.html in dom-bind so that polymer bindings can work.
• Replaced hard coded value of current-image for phone-carousel with binding, so that it can be updated on-hover

Hopefully this is what you were looking for.

Answer 2

you are not setting currentImage to custom-slider but only to custom-slide. So inside custom-slider you won't fint that property. That's the problem propably you are looking for.

edit your code to:

<custom-slider current-image="{{currentImage}}">
   <custom-slide current-image="{{currentImage}}"></custom-slide>
   <custom-slide current-image="{{currentImage}}"></custom-slide>
   <custom-slide current-image="{{currentImage}}"></custom-slide>
</custom-slider>

EDIT

The problem is that you can't do these things in index.html you need to wrap it into another file that will store currentImage property and notify about changes. So the only thing i did, was to wrap everything you had in index.html into new file which I called wrapper-elements (change it to watever you want) I also edited something to make it more simple, so don't do ctrl+c and ctrl+v. Just copy wrapper-elements element only.

Here is working plnkr: https://plnkr.co/edit/eElf4H6CQOVhahShyjBF?p=preview (I hope it's right link. I have never did something in plnkr)