基于 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，请查看 app/index.html 中的部分/页面 user-info。它根据从 URL 中获取的名称显示有关用户的信息。

当然你也应该看看app/elements/routing.html中的路由配置，了解如何从URL中抓取名称并将其设置为params变量。

那么您应该添加/修改您的 programs 路由以满足您的需要。

编辑：

您可以在此示例应用程序中看到类似的方法：data is fetch 在 route changes 时是 set to an article property 在 blog-app element 的范围内。在此元素中，所述article 属性本身绑定到similarly named property of the "page element" article-detail，该similarly named property of the "page element" article-detail 负责显示之前通过网络获取的文章内容。