应用程序路由器与聚合物

Question

我试图通过以下指南将应用程序路由器整合到我的聚合物应用程序中：

https://erikringsmuth.github.io/app-router/#/

https://erikringsmuth.github.io/app-router/#/databinding/1347queryParam1=Routing%20with%20Web%20Components

我的聚合物代码如下所示，我在其中加入了应用程序路由器：

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../app-router/app-router.html">

<polymer-element name="my-element">
  <template>

    <style></style>

    <app-router mode="pushstate">
      <app-route path="/:id" import="elements/new-page.html"></app-route>
    </app-router>

  </template>

  <script>
    Polymer({});
  </script>
</polymer-element>

id变量应该绑定到下面的元素。id被简单地用作获取特定JSON数据的索引。

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="my-service.html">

<polymer-element name="new-page" attribute="id">
  <template>

    <style></style>

    <my-service data="{{data}}"></my-service>

    <img src="{{data[id].bannerImage}}"/>
    <h2>{{data[id].contentHeading}}</h2>
    <template repeat="{{content in data[id].content}}">
      <img src="{{content}}" class="content"/><br>
    </template>

  </template>

  <script>
    Polymer({});
  </script>
</polymer-element>

但是，当我导航到localhost:8000/1时，我会得到一个404错误。我认为我没有正确使用应用程序路由器，因此出现了错误。

有人能发现我的错误吗？

Answer 1

我相信您必须在您的服务器上设置重写规则，以便它总是针对您的index.html文件。您几乎可以在任何地方找到这种路由，但是如果您需要用于Apache2的路由，您可以从ZendSk骨骼应用程序：Zend骨架应用程序.htaccess文件中获取一个路由。

只是不要忘记适应您的项目(尤其是index.html而不是index.php)。

Answer 2

您将属性属性名拼错为属性，这就是为什么它不会传递给您的元素.