Javascript 双向数据将两个数组绑定为一对多关系？（聚合物）

在使用数据绑定系统使两个具有一对多关系的数组保持同步时，我遇到了一些困难

应用程序的基本理念是我需要编辑照片。每张照片可能会出现在许多插槽中

目标

<template items="{{spread.slots}}" as="slot" is="dom-repeat">
  <paper-input value="binding for photo.width selected from [[slot.photoId]]"> </paper-input>
</template>

给出了两组模型：[照片1，照片2，…]和[插槽1，插槽2，…]

与关系：一张照片属于许多插槽

photos = [{id: 1}, {id: 2}, ...]

slots  = [{photoId: 1}, {photoId: 1}, {photoId: 2}, ...]

我希望传播插槽内渲染的照片中的更改

问题

如何将模型（将在插槽中渲染并由slot.photoId选择）中的更改传播到原始照片数组中的照片

相关代码

<template items="{{spread.slots}}" as="slot" is="dom-repeat">
  <paper-input value="binding for photo.width selected from [[slot.photoId]]"> </paper-input>
</template>

纸张材料{填充：1em；}
2张照片
照片[[Photo.id]]


1蔓延
3个插槽。照片1使用两次，照片2使用一次。需要编辑photo.width！

插槽{{slot.number}
有photoId:{{slot.photoId}}


如何为该插槽的照片绑定photo.width数据？

如果我理解正确，您的

照片

模型将具有属性

宽度

，您希望使用

纸张输入更改它。如果是这样的话，那么将
{{photo.width}
绑定到
纸张输入的
值
，我认为您缺少了这里的关联位。我当前正在编辑的照片的id与slot.photoId属性等效。我可以使用{photo.width}绑定来实现这一点，但是首先我如何选择具有等效slot.photoId的正确照片呢？是的，我已经考虑过这种可能性。这将导致它是单向绑定，而不是双向绑定，因此用户将无法编辑photo.width属性（就像我在代码段中希望的那样）。类似于
{{getPhoto（slot.photoId.width}}}
的东西会起作用，但我认为它不起作用，即使它起作用了，也会是一个性能非常差的解决方案：D.尝试使用
photoId
或一些独特的作为纸张输入id的东西，并聆听纸张输入的
更改事件，然后根据jsYea的值更新宽度，我目前正在使用类似的解决方案。监控照片中所有更改并将其传播到应用程序其余部分的功能。但是它真的很慢，我正在寻找更好的解决方案。谢谢你的快速回答！如果我理解正确，您的
照片
模型将具有属性
宽度
，您希望使用
纸张输入来更改它。如果是这样的话，那么将
{{photo.width}
绑定到
纸张输入的
值
，我认为您缺少了这里的关联位。我当前正在编辑的照片的id与slot.photoId属性等效。我可以使用{photo.width}绑定来实现这一点，但是首先我如何选择具有等效slot.photoId的正确照片呢？是的，我已经考虑过这种可能性。这将导致它是单向绑定，而不是双向绑定，因此用户将无法编辑photo.width属性（就像我在代码段中希望的那样）。类似于
{{getPhoto（slot.photoId.width}}}
的东西会起作用，但我认为它不起作用，即使它起作用了，也会是一个性能非常差的解决方案：D.尝试使用
photoId
或一些独特的作为纸张输入id的东西，并聆听纸张输入的
更改事件，然后根据jsYea的值更新宽度，我目前正在使用类似的解决方案。监控照片中所有更改并将其传播到应用程序其余部分的功能。但是它真的很慢，我正在寻找更好的解决方案。谢谢你的快速回答！