Polymer update route from custom element

Question

Complete Polyer noob here trying to write a simple little Polymer app.

What I'm trying to do is drive navigation of my iron-pages from a custom element (client-table) but can not figure out how to do this.

I've tried various permutations of using attr-for-selected and selected attributes within the table, but that doesn't seem to work. I've also tried setting up an anchor tag around the paper-button, and almost got that working, but it would trigger a full page refresh and not display my #clientInfo section when the page loaded.

Any suggestions on how to accomplish this, links to documentation that better explain routing/navigation in Polymer (esp. in cases of using custom elements), any default Polymer elements I should inspect the source of, etc?

<!-- snippet from index.html -->
<iron-pages attr-for-selected="data-route" selected="{{route}}">
    <section data-route="home">
      <paper-material elevation="1">
        <h2>Clients</h2>
        <client-table></client-table>
           <a data-route="clientInfo" href="/">test</a>
      </paper-material>
    </section>

    <section data-route="clientInfo">
      <paper-material elevation="1">
        <h2></h2>
        <p>This is the users section</p>
        <a href="/users/Rob">Rob</a>
      </paper-material>
    </section>
</iron-pages>

<!-- snipped from client-table.html -->
buildTable: function() {
    var domTable = this.$.table;
    var tableData = this.parseTableJson(this.buildTableJson());
    var tableMarkup = this.buildTable_initTable() + "<tbody>";

    for (var index in tableData) {
        row = tableData[index];

        var rowMarkup = "<tr>";
        rowMarkup += "<td>" + row.clientFirstName + "</td>";
        rowMarkup += "<td>" + row.clientLastName + "</td>";
        rowMarkup += "<td>" + row.clientEmail + "</td>";
        rowMarkup += "<td>" + row.clientPhone  + "</td>";
        rowMarkup += "<td>" + row.clientZipCode  + "</td>";
        rowMarkup += "<td><paper-button><iron-icon icon='card-membership'></iron-icon></paper-button></td>";
        rowMarkup += "</tr>";

        tableMarkup += rowMarkup;
    }
    tableMarkup += "</tbody>";

    $(domTable).append(tableMarkup);
}

Peter Walsh Peter Walsh · Accepted Answer · 2015-06-23T01:09:12

-1

votes

And then I found routing.html.

Polymer update route from custom element

1 Answers