双向数据将两个数组绑定为一对多关系? (聚合物)

时间:2016-06-15 17:58:22

标签: javascript polymer associations one-to-many 2-way-object-databinding

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

基本的应用创意是我需要编辑照片。每张照片都可能出现在许多插槽中。

目标

给出两个模型阵列:[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>

0 个答案:

没有答案