Polymer-Display-Inhalt basierend auf URL

Question

Ich versuche, ein benutzerdefiniertes Element für die Wiederverwendung zu erstellen. Was ich habe, sind Daten, die aus drei Attributen bestehen, die auf der jeweiligen Seite angezeigt werden, abhängig von dem Link, auf den Sie klicken.

Ich benutze die Polymer Starter Kit. Grundsätzlich möchte ich eine Seite mit Informationen haben, die sich je nach URL ändert. Ich habe eine Liste von Programmen auf einer Seite mit Links zu ihren jeweiligen Seiten. Bisher habe ich dies:

In meinem index.html habe ich einen Abschnitt, der wie folgt aussieht:

<section data-route="programs"> 
<paper-material elevation="1"> 
<h1>Programs</h1> 
<a href$="{{baseUrl}}programs/firstprogram">Program 1</a></br> 
<a href$="{{baseUrl}}programs/secondprogram">Program 2</a></br> 
<a href$="{{baseUrl}}programs/thirdprogram">Program 3</a></br> 
</paper-material> 
</section> 

Dann habe ich ein eigenes Element, Programm-Info, die

sieht wie folgt aus

<dom-module id="program-info"> 
    <template> 
    <h2 class="page-title">{{program.name}}</h2> 
    <p>{{program.price}}</p> 
    <p>{{program.description}}</p> 
    </template> 
    <script> 
    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'program-info' 
     }); 
    })(); 
    </script> 
</dom-module> 

Basierend auf dem Programm, das geklickt wurde, möchte ich Daten greifen und sie in meinem benutzerdefinierten Element (Name, Preis, Beschreibung) verwenden. Ich habe darüber nachgedacht, es in ein Array zu setzen, da es nur sieben Programme gibt, aber ich weiß nicht, wie man das richtige Element im Array basierend auf der URL findet.

Irgendwelche Gedanken?

Answer 1

Wenn Sie tatsächlich PSK verwenden, werfen Sie einen Blick auf den Abschnitt/Seite user-info in app/index.html. Es zeigt Informationen über einen Benutzer basierend auf dem Namen an, der aus der URL abgerufen wurde.

Natürlich sollten Sie sich auch die Routing-Konfiguration in app/elements/routing.html ansehen, um herauszufinden, wie der Name aus der URL abgerufen und auf die Variable params gesetzt wird.

Dann sollten Sie Ihre Route programs hinzufügen/ändern, um Ihre Bedürfnisse zu erfüllen.

Edit:

Sie können einen ähnlichen Ansatz in dieser Beispielanwendung sehen: Die data is fetch wenn die route changes und dann set to an article property im Rahmen der blog-app element ist. In diesem Element ist die Eigenschaft article selbst an die similarly named property of the "page element" article-detail gebunden, die dafür zuständig ist, den Inhalt des Artikels anzuzeigen, der zuvor über das Netzwerk abgerufen wurde.