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

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-slide(child) and custom-slider(parent)

CASE I

custom-slider.html

<template>
    <div>
       <custom-slide current-image="{{currentImage}}"></custom-slide>
       <custom-slide current-image="{{currentImage}}"></custom-slide>
       <custom-slide current-image="{{currentImage}}"></custom-slide>
    </div>
    <img src="{{currentImage}}">
</template>

It works perfectly when I used like this.

index.html

<body>
    <custom-slider>
    </custom-slider>
</body>

But when I change index and custom-slider html as shown below, it's not working. The hovered custom-slide not showing in the img tag. It's not getting updated.

CASE II

index.html

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

custom-slider.html

<template>
    <div>
       <content select="custom-slide, [custom-slide]"></content>
    </div>
    <img src="{{currentImage}}"></custom-slide>
</template>

No errors in the console as well.

I have a property called currentImage for both custom-slide and custom-slider as shown and even I used notify: true to the property.

currentImage: {
   type: String,
   value: 'some_image_url_by_default',
   notify: true
}

and on mouseover on custom-slide I have a event that is to update the customImage in custom-slider. The image url is updating in custom-slide but not in custom-slider. It is updating in both only when I used the first case code of my question.

UPDATE

When I have binding directly in the template of any Custom element then the binding is working. But when I have binding indirectly i.e, using <content> tag then the binding is not working. For example,

<parent-elem></parent-elem> // custom element

Parent element template

<dom-module id="parent-elem">
  <template>
    <div>{{name}}</div>
  </template>
  // Assume here in script I have a property name
</dom-module>

Like above, it is working.

But in the above code if I replace <div>{{name}}</div> with <content></content> and change

<parent-elem>
   <div>{{name}}</div>
</parent-elem> // custom element

then the binding is not working. Why? Then what is the use of having a <content> tag?

EDIT

Plunker with problem

In that plunker check the images by hover them. First three are without content tag and next three are by using content tag. Give me the solution. Help would be appreciated.

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.

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)

来源：https://stackoverflow.com/questions/44566067/data-binding-updating-between-parent-and-child-using-content-tag-in-polymer1-0

标签

html

polymer

polymer-1.0

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