html – 使用Polymer1.0中的标记在父级和子级之间进行数据绑定/更新

我有一个包含幻灯片列表的滑块元素和一个显示悬停幻灯片的img,如下所示.我在自定义幻灯片(子)和自定义滑块(父)之间绑定currentimage

案例I

定制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标记中.它没有得到更新.

案例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的属性,用于自定义幻灯片和自定义滑块,如图所示,甚至我使用了notify：true属性.

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

在自定义幻灯片上的鼠标悬停我有一个事件是更新自定义滑块中的customImage.图片网址在自定义幻灯片中更新,但不在自定义滑块中更新.只有当我使用我的问题的第一个案例代码时,它才会更新.

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 with problem

在那个plunker通过悬停他们检查图像.前三个没有内容标记,接下来三个是使用内容标记.给我解决方案.帮助将不胜感激.

解决方法

Here是你当前的plunkr的一个分支.我对它做了两处修改.

>在dom-bind中吞噬index.html,以便聚合物绑定可以起作用.
>更换带有绑定功能的电话轮播的当前图像的硬编码值,以便可以在悬停时更新

希望这是你想要的.

原文地址：https://www.jb51.cc/html/231696.html

html – 使用Polymer1.0中的标记在父级和子级之间进行数据绑定/更新

解决方法

相关推荐