Question

我正在开发预约预约系统。它基本上由一组Polymer自定义元素组成，排列如下（缩进元素在元素的模板中，而不是如图所示实际组织）

<my-appointments>
  <person-appointment booking="{{booking}}>
    <booking-type type="{{booking.type}}">
      <div>[[booking.type]]</div>
    </booking-type>
  </person-appointment>
  <appointment-day booking="{{booking}}>
    <template is="dom-repeat" items="{{appointments}} as="{{appointment}}">
      <div>[[appointment.type]]</div>
    </template>
  </appointment-day>
</appointment>

<appointment-day>元素booking内的

被定义为＆＃34;对象＆＃34;属性和appointments作为＆＃34;数组＆＃34;。在进行预订时，预订对象将拼接到正确位置的约会阵列中。同时我使用linkPaths功能加入路径＆＃39;预订＆＃39;路径＆＃39;约会.n＆＃39; （其中n为0,1,2等，用于约会阵列预订的位置）

这是执行此操作的代码

          if (foundAppointment) {
            //found where to insert appointment, so do so
            this.splice(path, j, 0, this.booking);
            this.linkPaths('booking', path + '.' + j);
            this.linkedBooking = true;
            break;
          }

未显示<booking-type>内部更新type属性的机制。因此，当我使用此机制更新type属性时，可视表示在<person-appointment>元素内部发生更改，但在dom-repeat内部不会更改。我可以检查位于appointents[n]的对象是否已更新，但显示不会更新。

我认为我没有将预订正确地链接到相应的预约条目。但我应该如何实现这个

Answer 1

聚合物未观察到appointments的子属性的变化。尝试强制数据系统使用以下代码获取突变数组：

// Force data system to pick up the **array** mutations
var array = this.appointments;
this.appointments= [];
this.appointments= array;

尝试将此添加到您的代码中。

  if (foundAppointment) {
    //found where to insert appointment, so do so
    this.splice(path, j, 0, this.booking);
    this.linkPaths('booking', path + '.' + j);
    this.linkedBooking = true;
    // Force data system to pick up array mutations
    var array = this.appointments;
    this.appointments= [];
    this.appointments= array;
    break;
  }

或者强制数据系统使用以下代码获取对象突变：

// Force data system to pick up array mutations
var object = this.appointment;
this.appointment= [];
this.appointment= object;

Answer 2

我只是猜测问题出在binding to array items。聚合物有特殊规则。

以下是数组绑定的一个示例：Plunk

<template is="dom-repeat" items="[[first4People(people, people.*)]]"> 
    <div>
        Index: <span>[[index]]</span>
        <br>
        First as this:[[arrayItem(people.*, index, 'first')]]
        <br>
        First not as this: <span>[[item.first]]</span>
   </div>
   <br><br>
</template>

该问题的简化在线示例将有助于更好地理解该问题。

如何链接路径，以便在dom-repeat

2 个答案: