0

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

我正在使用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 在数组中抓取正确的项目。

有什么想法吗？

4

1 回答 1

1

如果您确实在使用 PSK ，请查看user-info. app/index.html它根据从 URL 中获取的名称显示有关用户的信息。

当然，您还应该查看路由配置，app/elements/routing.html以了解如何从 URL 中获取名称并将其设置为params变量。

然后你应该添加/修改你的programs路线以满足你的需要。

编辑：

您可以在此示例应用程序中看到类似的方法：当路由更改时获取数据，然后将其设置为元素范围内的属性。在该元素中，所述属性本身绑定到“页面元素”的类似名称的属性，该“页面元素”负责显示先前通过网络获取的文章内容。articleblog-apparticlearticle-detail

于 2016-04-03T09:27:19.873 回答