在使用数据绑定系统保持两个数组具有一对多关系同步时,我遇到了一些困难。
基本的应用创意是我需要编辑照片。每张照片都可能出现在许多插槽中。
目标
给出两个模型阵列:[Photo 1,Photo 2,...]和[Slot 1,Slot 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>
考虑的可能性
相同的问题在代码段中描述:
Polymer({
is: 'demo-element',
properties: {
project: {
type: Object,
value: () => {
return {
photos: [
{id: 1, src: 'http://lorempixel.com/200/100/cats/1', width: 200 },
{id: 2, src: 'http://lorempixel.com/200/100/cats/2', width: 100}
],
spreads: [{
slots: [{
number: 1,
photoId: 1
},{
number: 2,
photoId: 1
}, {
number: 3,
photoId: 2
}]
}]
};
}
}
}
});
<!DOCTYPE html><html><head>
<script src="http://static.jsbin.com/js/vendor/traceur.js"></script>
<meta charset="utf-8">
<meta description="Polymer 1.0 Template">
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html" />
<link rel="import" href="paper-input/paper-input.html" />
<link rel="import" href="paper-material/paper-material.html" />
<style> paper-material {padding: 1em;}</style>
</head>
<body>
<demo-element></demo-element>
<dom-module id="demo-element">
<template>
<paper-material>
<h2>2 Photos</h2>
<template is="dom-repeat" items="{{project.photos}}" as="photo">
<span>
Photo [[photo.id]]
<img src$="{{photo.src}}"
style="width: [[photo.width]]px;" />
</span>
</template></paper-material>
<br />
<paper-material>
<template items="{{project.spreads}}" as="spread" is="dom-repeat">
<h2>1 Spread </h2>
<h4>3 Slots. Photo 1 used twice, Photo 2 used once. Need to edit photo.width!</h4>
<template items="{{spread.slots}}" as="slot" is="dom-repeat">
<div>
<p>
The slot {{slot.number}}
has photoId: {{slot.photoId}} <br /><br />
How to data bind photo.width for the photo of this slot?
<paper-input label="binding for width property of photo of slot [[slot.number]] with id [[slot.photoId]]"></paper-input>
</p>
</div>
</template>
</template></paper-material>
</template>
</dom-module>
</body>
</html>