在 Polymer1.0 中父子之间使用 <content> 标签的数据 binding/updating

Question

我有一个包含幻灯片列表的滑块元素和一个 img 来显示悬停的幻灯片，如下所示。我在 custom-slide(child) 和 custom-slider(parent)

之间绑定 currentImage

案例一

自定义-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>

自定义-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 with problem

在那个 plunker 中，通过将鼠标悬停在图像上来检查它们。前三个没有内容标签，后三个使用内容标签。给我解决方案。帮助将不胜感激。

Answer 1

您没有将 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 的新文件中（将其更改为你想要的任何内容）我还编辑了一些东西以使其更简单，所以不要使用 ctrl+c 和 ctrl+v。只需复制 wrapper-elements 元素即可。

这是工作 plnkr：https://plnkr.co/edit/eElf4H6CQOVhahShyjBF?p=preview （我希望它是对的link。我从来没有在plnkr中做过什么）

Answer 2

Here 是您当前的 plunkr 的一个分支。我对它做了两处更改。

将 index.html 吞没在 dom-bind 中，以便聚合物绑定可以工作。
用绑定替换 phone-carousel 的 current-image 的硬编码值，以便它可以在悬停时更新

希望这就是您要找的。

在 Polymer1.0 中父子之间使用 <content> 标签的数据 binding/updating

Data binding/updating between parent and child using <content> tag in Polymer1.0

html

polymer

polymer-1.0