【发布时间】：2017-06-15 11:12:46
【问题描述】：
我有一个滑块元素，其中包含幻灯片列表和一个 img 以显示悬停的幻灯片，如下所示。我在custom-slide(child) 和custom-slider(parent) 之间绑定currentImage
案例一
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>
我这样用的时候效果很好。
index.html
<body>
<custom-slider>
</custom-slider>
</body>
但是当我如下所示更改 index 和 custom-slider html 时，它不起作用。悬停的custom-slide 未显示在img 标记中。没有更新。
案例二
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>
控制台中也没有错误。
我有一个名为currentImage 的属性，用于custom-slide 和custom-slider，如图所示，甚至我对属性使用了notify: true。
currentImage: {
type: String,
value: 'some_image_url_by_default',
notify: true
}
在mouseover 上custom-slide 我有一个事件是更新custom-slider 中的customImage。图片 url 在custom-slide 中更新，但在custom-slider 中没有更新。只有当我使用我的问题的第一个案例代码时，它才会更新。
更新
当我在任何自定义元素的模板中直接绑定时，绑定就可以工作了。但是，当我间接绑定时，即使用 <content> 标签，则绑定不起作用。例如，
<parent-elem></parent-elem> // custom element
父元素模板
<dom-module id="parent-elem">
<template>
<div>{{name}}</div>
</template>
// Assume here in script I have a property name
</dom-module>
就像上面一样，它正在工作。
但在上面的代码中，如果我将<div>{{name}}</div> 替换为<content></content> 并更改
<parent-elem>
<div>{{name}}</div>
</parent-elem> // custom element
然后绑定不起作用。为什么？那么有<content>标签有什么用呢？
编辑
在那个 plunker 中，通过将图像悬停来检查图像。前三个没有内容标签，接下来的三个是使用内容标签。给我解决方案。帮助将不胜感激。
【问题讨论】：
-
binding如何在 HTML 中工作？由于index.html不是聚合物元素，因此您无法在其中绑定属性。正如@KubaŠimonovský 指出的那样，您还需要将currentImage传递给custom-slider。 -
<img src="{{currentImage}}"></custom-slide>这是仅在 SO 中的错字还是在您的代码中？ -
这只是 SO 中的一个错字。但我尝试了@KubaS 的回答，但没有奏效
-
它不起作用的原因是因为您在
index.html中尝试过它而不是聚合物元素。如果您想在 index.html 中执行此操作，请尝试使用dom-bind。 -
肯定的是，您应该使用
<img src$="{{currentImage}}" />，因为如果您不添加$十，它会尝试使用元素类属性来共享值，但是使用$它是使用 HTML 属性。同样@a1626 是对的，在index.html中使用dom-bind
标签： html polymer polymer-1.0