Mr_*_*ect 0 html polymer polymer-1.0
我有一个滑块元素,其中包含幻灯片列表和一个img显示悬停幻灯片,如下所示.我currentImage在custom-slide(孩子)和custom-slider(父母)之间有约束力
情况一
定制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,如下所示,它不起作用.徘徊custom-slide不显示在img标签中.它没有得到更新.
案例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>
定制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我有一个事件是,以更新customImage custom-slider.图片网址正在更新custom-slide但不在custom-slider.只有当我使用我的问题的第一个案例代码时,它才会更新.
UPDATE
当我直接在任何Custom元素的模板中绑定时,绑定工作正常.但是当我间接绑定时,即使用<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中通过悬停它们检查图像.前三个没有内容标记,接下来三个是使用内容标记.给我解决方案.帮助将不胜感激.
你不是currentImage为了custom-slider而只是为了custom-slide.所以在里面custom-slider你不会打算那个属性.这是你正在寻找的问题.
编辑您的代码:
<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>
编辑
问题是你不能做这些事情index.html需要将它包装到另一个存储currentImage属性并通知变化的文件中.所以我唯一能做的就是将你所拥有的所有内容包装index.html到我调用的新文件中wrapper-elements(将其更改为你想要的watever)我还编辑了一些内容以使其更简单,所以不要做ctrl + c和ctrl + v .只需复制wrapper-elements元素.
这是工作plnkr:https://plnkr.co/edit/eElf4H6CQOVhahShyjBF ？ p = preview (我希望它是正确的链接.我从来没有在plnkr做过什么)