How can I link paths so results are updated in dom-repeat

Asked By: Anonymous

I am developing an appointment booking system. It basically consists of a set of Polymer custom elements arranged as follows (indented elements are in the template of the element rather than actually organised as shown)

<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>

inside the <appointment-day> element booking is defined as an “Object” property and appointments as an “Array”. As a booking is made, the booking object is spliced into the appointments array at the correct place.
At the same time I use the linkPaths function to join path ‘booking’ to path ‘appointments.n’ (where n is 0, 1, 2 etc for where in the appointments array booking is situated)

This is the code that does this

          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;
          }

Not shown is a mechanism inside <booking-type> to update the type property. SO when I update the type property using this mechanism, the visual representation changes inside the <person-appointment> element but it does not change inside the dom-repeat. I can check that the object located at appointents[n] IS updated, but the display is not updated.

I presume I haven’t properly linked booking to the appropriate appointment entry. BUT how should I achieve this

Solution

Answered By: Anonymous

Polymer does not observe the change of sub-properties of appointments.
Try to Force data system to pick up array the mutations with the code below:

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

Try to add this to your code.

  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;
  }

Or to Force data system to pick up the Object mutations with the code below:

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