{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 一纸荒年 Trace。 的问题《Data binding/updating between parent and child usi》','https://www.manongdao.com/q-226443.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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
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.
index.htmlindom-bindso that polymer bindings can work.current-imageforphone-carouselwith binding, so that it can be updated on-hoverHopefully this is what you were looking for.
you are not setting
currentImagetocustom-sliderbut only tocustom-slide. So insidecustom-slideryou won't fint that property. That's the problem propably you are looking for.edit your code to:
EDIT
The problem is that you can't do these things in
index.htmlyou need to wrap it into another file that will storecurrentImageproperty and notify about changes. So the only thing i did, was to wrap everything you had inindex.htmlinto new file which I calledwrapper-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 copywrapper-elementselement 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)