Element does not correctly respond to DOM changes

[32graham]

I am working on an Aurelia application. When I want to provide a dynamic list of options to a paper-dropdown-menu I have to use Polymer's binding syntax which leads to a confusing mashup of syntax because the rest of the application uses Aurelia style binding syntax. It seems that the element does not react to new paper-items being placed into the DOM unless it is placed through Polymer style bindings.

In short, I want to use

<paper-item repeat.for="pastry of pastries" model.bind="pastry">${pastry}</paper-item>

instead of

<template is="dom-repeat" items.two-way="pastries">
  <paper-item model="{{item}}">{{item}}</paper-item>
</template>

Is there any way to get this working without using Polymer's binding syntax?

Here is a Plunker that reproduces the issue.

View

<template>

  <!--
  This works but uses a weird combination of Polymer binding syntax with
  Aurelia binding syntax
  -->
  <paper-dropdown-menu label="Your favorite pastry">
    <paper-menu class="dropdown-content" selected.two-way="favPastry" attr-for-selected="model">
      <template is="dom-repeat" items.two-way="pastries">
        <paper-item model="{{item}}">{{item}}</paper-item>
      </template>
    </paper-menu>
  </paper-dropdown-menu>

  <p class="help-block">Bound value in favPastry is: ${favPastry}</p>
  <!-- End works -->

  <!--
  This does not work, but uses Aurelia binding syntax exclusively
  -->
  <paper-dropdown-menu label="Roundest pastry">
    <paper-menu class="dropdown-content" selected.two-way="roundestPastry" attr-for-selected="model">
      <!-- This non-dynamic item will work -->
      <paper-item model="Bear Claw">Bear Claw</paper-item>
      <!-- These dynamic ones will not -->
      <paper-item repeat.for="pastry of pastries" model.bind="pastry">${pastry}</paper-item>
    </paper-menu>
  </paper-dropdown-menu>

  <p class="help-block">Bound value in favPastry is: ${roundestPastry}</p>
  <!-- End does not work -->

</template>

View Model

export class App {
  pastries = [ "Croissant", "Donut", "Financier", "Madeleine" ];
  favPastry = "Financier";
  roundestPastry = "Donut";
}

We looked into this from the Aurelia perspective and could not find a way to make it work aurelia/binding#262.

[valdrinkoshi]

Strange, the elements are rendered but the binding seems broken. In general, when you have to manipulate the dom you should use Polymer.dom methods (more info here https://www.polymer-project.org/1.0/docs/devguide/local-dom); it basically takes care of performing the manipulation in the right way according to the context (e.g. shadow dom, shady dom). Here some examples on how to use either the Polymer.dom methods or update the binding http://jsbin.com/libazi/2/edit?html,output

I wonder if with the Aurelia syntax the generated paper-items are added in the wrong place..

Hope this is helpful..!

[32graham]

Finally got around to upgrading to use the Polymer 2.0 elements. Polymer 2.0 fixes this issue because of this:

Improved interoperability. By removing the need to use Polymer.dom for DOM manipulation, Polymer 2.0 makes it easier to use Polymer components with other libraries and frameworks.

I can now use the Aurelia binding syntax like I wanted to

<paper-item repeat.for="pastry of pastries" model.bind="pastry">${pastry}</paper-item>

Polymer's and Aurelia's commitment to following web standards and using the platform make things like this just work even if they aren't a priority. 👍 and thanks for the good work!