Data binding from parent element to component used in route

[KhoaVo]

I'm trying to pass data to a component defined in an app-route but I seem to be unable to do it. Below are a few of the many things I've tried. I've verified that navConfig is correctly passed into core-foo. But it's always undefined in core-bar.

<polymer-element name="core-foo" attributes="navConfig">
  <template>
    <app-route path="/bar">
      <template>
        <core-bar navConfig="{{navConfig}}"></core-bar>
      </template>
    </app-route>

    <app-route path="/bar">
      <template bind="{{navConfig}}">
        <core-bar navConfig="{{navConfig}}"></core-bar>
      </template>
    </app-route>

    <app-route path="/bar" element="core-bar" navConfig="{{navConfig}}"></app-route>
  </template>
</polymer-element>

Any ideas if this is possible?

[erikringsmuth]

It's possible but it currently has to be done using the before-data-binding event https://erikringsmuth.github.io/app-router/#/events#before-data-binding. Look at the "Polymer event mapping" example at the end.

One of the problems with <template bind="{{navConfig}}"> is it will immediately be evaluated from this.

<app-route path="/bar">
  <template bind="{{navConfig}}">
    <core-bar navConfig="{{navConfig}}"></core-bar>
  </template>
</app-route>

To this.

<app-route path="/bar">
  <core-bar navConfig="{{navConfig}}"></core-bar>
</app-route>

Which will make the core-bar show up right away. Basically, the bind attribute is Polymer's syntax to bind the template to a model immediately.