Polymer 1.0 中的路由

Question

我不熟悉 Web 开发和使用 polymer 1.0.4 构建应用程序。我正在使用类似于启动工具包中示例的 page.js 路由。现在我构建的许多自定义元素都使用 ajax 并定期刷新数据。 page.js 路由的问题似乎它加载了所有自定义元素，即使该元素未被用户查看。所以即使不需要，所有自定义元素都会加载数据。我的问题：

1- 我该如何解决这个问题，以便元素仅在最终用户查看时才加载数据？我是否应该将路由更改为其他选项，例如 more-routing？

2-如果用户在一个自定义元素中填写数据，然后点击link到另一个元素。当用户返回到第一个自定义元素时，数据会保留吗？当使用回到旧视图时，如何重置自定义元素中的聚合物和 html 元素？

Answer 1

首先，PolymerLabs/more-routing 库是 page.js 的一个很好的替代品，并且很容易实现。由于此库更具声明性，您可以执行以下操作：

routes.html

<more-routing-config driver="hash"></more-routing-config>
<more-route name="myRoute" path="/my-route-path/:id"></more-route>

应用-element.html

<dom-module id="app-element">
  <style>
    iron-selector > * {
      display: none;
    }
    iron-selector > .iron-selected {
      display: block;
    }
  </style>

  <template>
    <more-route-selector>
      <iron-selector>
        <x-element></x-element>
      </iron-selector>
    </more-route-selector>
  </template>
  <script>Polymer({ ... });</script>
</dom-module>

x-element.html

<dom-module id="x-element">
  <template>
    <more-route id="route" context name="myRoute" params="{{params}}" active="{{activeRoute}}"></more-route>
  </template>
  <script>
    Polymer({
      is: 'x-element',
      observers: [ '_paramsChanged(activeRoute, params.id)' ],

      _paramsChanged: function(activeRoute) {
        if (activeRoute) {
         // Active route
        } else {
         // Inactive route
        }
      }
    })
  </script>
</dom-module>

查看存储库 demo 文件夹中的 polyfora 应用程序。

否则，要使用page.js我会考虑：

删除自定义元素中的任何自动 iron-ajax 查询；
将 state 属性传递给自定义元素；
将观察者添加到每个自定义元素中的任何 state 更改，这些更改会触发运行任何 iron-ajax 查询的函数。

Answer 2

再次，我建议 https://github.com/PolymerLabs/more-routing 根据聚合物峰会视频，最终 'carbon'（如果我没记错的话）一组组件将处理此问题，但在此之前似乎是标准方法。

通过以下方式设置页面：

<more-routing-config driver="hash"></more-routing-config>
<more-route name="one" path="/one"></more-route>
<more-route path="/two">
    <more-route name="two" path="/:name"></more-route>
</more-route>

然后菜单通过：

<more-route-selector>
  <paper-menu selected="0">
    <paper-item route="{{urlFor('one')}}">One</paper-item>
    <paper-item route="{{urlFor('two', {name: 'sup'})}}">Two</paper-item>   
  </paper-menu> 
</more-route-selector>

然后实际页面通过：

<more-route-selector selectedParams="{{params}}">
  <iron-pages selected="0">
    <section route="one">
      <div> Page one </div>
    </section>
    <section route="two">
      <div> Page two: {{params.name}} </div>
    </section>
  </iron-pages>
</more-route-selector>

我在 github 上的 Polymore 存储库下使用过它，上面的示例来自此，但它在新家似乎并没有太大变化。

完成基础设置后，在 iron-pages 上收听更改，例如可用的事件 here。在此类侦听器中，您可以加载 iron-pages 中每个部分的数据。一种方法是使用此类侦听器调用自定义元素的方法，可能使用一种行为，然后降低数据。

Answer 3

尝试dna-router。您只能在 HTML 中创建定义状态和路由。

设置路由：

<dna-new-state state='home' route='/home'></dna-new-state> <dna-new-state state='user' route='/user/:id/'></dna-new-state>

通过以下方式创建视图：

<dna-view
state='home'
element='home-template'></dna-view>

您可以在 home-template 聚合物属性中获得所有 params。

var params = this.params

有关详细文档，请访问：https://github.com/Saquib764/dna-router

Answer 4

从 Polymer 1.4 开始，可以使用 carbon-route（后来更名为 app-route）：

下面是取自聚合物博客的示例：

<carbon-location route="{{route}}">
</carbon-location>

<carbon-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}">
</carbon-route>

<paper-tabs selected="{{data.tabName}}" attr-for-selected="key">
  <paper-tab key="foo">Foo</paper-tab>
  <paper-tab key="bar">Bar</paper-tab>
  <paper-tab key="baz">Baz!</paper-tab>
</paper-tabs>

<neon-animated-pages selected="{{data.tabName}}"
                     attr-for-selected="key"
                     entry-animation="slide-from-left-animation"
                     exit-animation="slide-right-animation">
  <neon-animatable key="foo">Foo Page Here</neon-animatable>
  <neon-animatable key="bar">Bar Page Goes Here</neon-animatable>
  <neon-animatable key="baz">Baz Page, the Best One of the Three</neon-animatable>
</neon-animated-pages>

另见类似问题：

Polymer 1.0 中的路由

Routing in polymer 1.0

javascript

web

polymer

polymer-1.0