使用< content>的父母和孩子之间的数据绑定/更新标记在Polymer1.0中 [英] Data binding/updating between parent and child using <content> tag in Polymer1.0
问题描述
我有一个滑块元素，其中包含幻灯片列表和 img 以显示如下所示的悬停幻灯片。我在 custom-slide （child）和 custom-slider currentImage c $ c>（家长）
CASE I
$ b 自定义-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>
当我这样使用时，它完美地工作。
index.html
< body>
< custom-slider>
< / custom-slider>
< / body>
但是当我更改索引和自定义滑块 html，如下所示，它不起作用。在 img 标记中未显示悬停的自定义幻灯片。它没有得到更新。
CASE II
$ b 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>
控制台中没有错误。
我为自定义幻灯片和自定义滑块 / code>，如图所示，甚至我使用 notify：true 给该属性。
currentImage：{
type：String，
value：'some_image_url_by_default'，
notify：true
}
并在 mouseover 上自订幻灯片我有一个事件是更新 custom-slider 中的customImage。图片网址在自定义幻灯片中更新，但不在自定义滑块中更新。只有当我使用我的问题的第一个案例代码时，它才会更新。
更新
当我在任何Custom元素的模板中直接绑定时，绑定正在工作。但是，当我间接地进行绑定时，即使用< content> 标签，则绑定不起作用。例如，
< parent-elem>< / parent-elem> //定制元素
父元素模板
< dom-module id =parent-elem>
< template>
< div> {{name}}< / div>
< / template>
//假设在脚本中我有一个属性名称
< / dom-module>
像上面这样，它正在工作。
但是在上面的代码中，如果我用< content>< />替换并更改< div> {{name}}< / div> 内容>
< parent-elem>
< div> {{name}}< / div>
< / parent-elem> //定制元素
然后绑定不起作用。为什么？那么有什么用< content> 标记？
编辑
在那个笨蛋中，通过悬停来检查图像。前三个没有内容标签，接下来三个是使用内容标签。给我解决方案。帮助将不胜感激。
在这里，是你当前的一个分支。
- 吞噬
index.html在dom-bind以便聚合物绑定可以工作。
- 替换
当前图片的硬编码值为手机转盘带绑定，这样它就可以更新为悬停
- 替换
希望这是你正在寻找的。
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.
- Engulfed
index.htmlindom-bindso that polymer bindings can work. - Replaced hard coded value of
current-imageforphone-carouselwith binding, so that it can be updated on-hover
Hopefully this is what you were looking for.
这篇关于使用< content>的父母和孩子之间的数据绑定/更新标记在Polymer1.0中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
