Question

我有一个包含幻灯片列表的滑块元素和一个显示悬停幻灯片的img，如下所示。我在currentImage（孩子）和custom-slide（父母）之间约束custom-slider

CASE 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时，如下所示，它无效。悬停的custom-slide未显示在img标记中。它没有得到更新。

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>

自定义-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。图片网址正在custom-slide中更新，但未在custom-slider中更新。只有当我使用我问题的第一个案例代码时，它才会更新。

更新

当我直接在任何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中，通过将它们悬停检查图像。前三个没有内容标记，接下来三个是使用内容标记。给我解决方案。帮助将不胜感激。

Answer 1

您没有将success: function(result) { for (var doctor in result) { var doctor = result[i]; el.append('<option value="' + doctor.value + "'>' + doctor.name + '</option>'; } },设置为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的新文件中（将其更改为您想要的watever）我还编辑了一些东西以使其更简单，所以不要做ctrl + c和ctrl + v。只需复制wrapper-elements元素即可。

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

Answer 2

Here是你当前傻瓜的一个分支。我对它做了两处修改。

在index.html中吞噬dom-bind，以便聚合物绑定可以正常工作。
将current-image的{{1}}的硬编码值替换为绑定，以便可以在悬停时更新

希望这就是你要找的东西。

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

2 个答案: