聚合物显示内容基于URL

Question

我正在尝试创建一个自定义元素以供重复使用。我所拥有的是由三个属性组成的数据，这些属性将显示在其各自的页面上，具体取决于您单击的 link。

我正在使用 Polymer Starter Kit。基本上，我想要一个根据 URL 是什么而变化的信息页面。我在一个页面上有一个程序列表，links 到它们各自的页面。到目前为止我有这个：

在我的 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>

然后我有一个自定义元素 program-info，它看起来像这样

<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，请查看 app/index.html 中的 section/page user-info。它根据从 URL.

中抓取的名称显示有关用户的信息

当然你也应该看看app/elements/routing.html中的路由配置，弄清楚名称是如何从URL中抓取并设置到params变量中的。

那么您应该 add/modify 您的 programs 路线以满足您的需要。

编辑：

您可以在此示例应用程序中看到类似的方法：data is fetch when the route changes and is then set to an article property in the scope of the blog-app element. In this element, said article property is itself bound to the similarly named property of the "page element" article-detail 负责显示先前通过网络获取的文章内容。

聚合物显示内容基于URL

Polymer display content based on URL

polymer-1.0

polymer-starter-kit