Polymer Starter Kit HOWTO

[go4cas]

I have used your sample code extract, to update the PSK. Whenever I click on the Home or Contacts links, I get the following error: "unexpected error in a callback Error: redirect loop detected". And, when I click on the Users link, nothing is displayed. I have even uninstalled page.js completely.

Here's the main bits of my index.html:

  <template is="dom-bind" id="app">
    <excess-route route="/:mainmenu/(.*)" mainmenu="{{appRoute}}"></excess-route>
    <excess-route route="/(.*)" redirect-to="/home" activation-modifiers="x"></excess-route>

    <paper-drawer-panel id="paperDrawerPanel">
      <!-- Drawer Scroll Header Panel -->
      <paper-scroll-header-panel drawer fixed>

        <!-- Drawer Toolbar -->
        <paper-toolbar id="drawerToolbar">
          <span class="paper-font-title">Menu</span>
        </paper-toolbar>

        <!-- Drawer Content -->
        <paper-menu class="list" attr-for-selected="route" selected="{{appRoute}}">
          <a href="#/home" route="home">Home</a>
          <a href="#/users/all" route="users">Users</a>
          <a href="#/contact" route="contact">Contact</a>
        </paper-menu>
      </paper-scroll-header-panel>

      <!-- Main Area -->
      <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>

        <!-- Main Toolbar -->
        <paper-toolbar id="mainToolbar" class="tall">
          <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
          <span class="flex"></span>

          <!-- Toolbar icons -->
          <paper-icon-button icon="refresh"></paper-icon-button>
          <paper-icon-button icon="search"></paper-icon-button>

          <!-- Application name -->
          <div class="middle middle-container center horizontal layout">
            <div class="app-name">Polymer Starter Kit</div>
          </div>

          <!-- Application sub title -->
          <div class="bottom bottom-container center horizontal layout">
            <div class="bottom-title paper-font-subhead">The future of the web today</div>
          </div>

        </paper-toolbar>

        <!-- Main Content -->
        <div class="content">

          <iron-pages attr-for-selected="route" selected="{{appRoute}}">
            <section route="home">...</section>
            <section route="users">
              <!-- this route manages /users subtree -->
              <excess-route route="/users/:userId" user-id="{{userId}}" active="{{hasUserId}}"></excess-route>
              <template is="dom-if" if="{{!hasUserId}}">
                <!-- if user id is not specified, show a list of users -->
                <section user="all">
                  <p>This is the users section</p>
                  <a href="#/users/Rob">Rob</a>
                </section>
              </template>
              <template is="dom-if" if="{{hasUserId}}">
                <!-- if user id is specified, show the user -->
                <iron-pages attr-for-selected="user" selected="{{userId}}">
                  <section user="Rob">
                    User:<span>{{userId}}</span>
                  </section>
                </iron-pages>
              </template>
            </section>
            <section route="contact">contacts go here</section>
          </iron-pages>
        </div>
      </paper-scroll-header-panel>
    </paper-drawer-panel>

    <paper-toast id="toast">
      <span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
    </paper-toast>

  </template>

[go4cas]

I have managed to fix the Home and Contcats routes, by changing the first rout from:

<excess-route route="/:mainmenu/(.*)" mainmenu="{{appRoute}}"></excess-route>

to:

<excess-route route="/:mainmenu/(.*)?" mainmenu="{{appRoute}}"></excess-route>

note the extra ? character

But, the Users section is still not rendering ...

[go4cas]

Okay, all fixed now.

The sample code had the following link :html <a href="#/users/all" route="users">Users</a>. I simply changed it to: html <a href="#/users" route="users">Users</a>.

[atotic]

Awesome, glad you've worked it out. I'll leave this issue open for anyone else looking for PSK solution.