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>

然后我有一个自定义元素，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，请查看user-info中的app/index.html部分。它根据从URL中获取的名称显示有关用户的信息。

当然，您还应该查看app/elements/routing.html中的路由配置，以了解如何从网址抓取名称并将其设置为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，该ng-change负责显示先前通过网络提取的文章内容。

聚合物显示基于URL的内容

1 个答案: