Содержимое экрана для полимеров на основе URL

Question

Я пытаюсь создать пользовательский элемент для повторного использования. У меня есть данные, состоящие из трех атрибутов, которые будут отображаться на соответствующей странице, в зависимости от выбранной вами ссылки.

Я использую Polymer Starter Kit. В принципе, я хочу иметь страницу информации, которая изменяется в зависимости от того, какой URL-адрес. У меня есть список программ на странице со ссылками на их соответствующие страницы. До сих пор у меня есть это:

В моей index.html, у меня есть раздел, который выглядит следующим образом:

<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> 

Тогда у меня есть пользовательский элемент, программа-информация, которая выглядит как этот

<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> 

На основании щелкнувшей программы я хочу получить данные и использовать их в своем пользовательском элементе (имя, цена, описание). Я думал о том, чтобы поместить его в массив, так как есть только семь программ, но я не знаю, как захватить правильный элемент в массиве на основе URL.

Любые мысли?

Answer 1

Если вы действительно используете PSK, ознакомьтесь с разделом/страницей user-info в app/index.html. Он отображает информацию о пользователе на основе имени, которое было захвачено из URL.

Конечно, вы также должны взглянуть на конфигурацию маршрутизации в app/elements/routing.html, чтобы выяснить, как имя захватывается из URL-адреса и устанавливается в переменной params.

Тогда вы должны добавить/изменить свой маршрут programs в соответствии с вашими потребностями.

Edit:

Вы можете увидеть подобный подход в этом примере приложения: data is fetch когда route changes и затем в рамки blog-app elementset to an article property. В этом элементе свойство article связано с similarly named property of the "page element" article-detail, которое отвечает за отображение содержимого статьи, которое ранее было загружено по сети.