在聚合物1.0中布线

Question

我是使用聚合物1.0.4进行Web开发和构建应用程序的新手。 我正在使用类似于入门工具包示例中的page.js路由。 现在，我构建的许多自定义元素都使用ajax并定期刷新数据。 Page.js路由的问题是，即使用户未查看该元素，它似乎也会加载所有自定义元素。 因此所有自定义元素都在加载数据，即使不需要它也是如此。 我的问题：

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

2-如果用户将数据填充到一个自定义元素中，则单击指向另一元素的链接。 当用户返回第一个自定义元素时，数据将保留吗？ 当使用回到旧视图时，如何重置自定义元素中的polymer和html元素？

Answer 1

再次，我建议https://github.com/PolymerLabs/more-routing根据聚合物峰会的视频，最终一组“碳素”（如果我没记错这个名字的话）组件将处理这个问题，但是直到那时这似乎是标准方法。

通过以下方式设置页面：

<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存储库下时，我使用了它，而上面的示例来自于此，但在它的新家中似乎并没有太大改变。

设置完基础后，请听听铁页上的更改，例如此处提供的事件。 在此类侦听器中，您可以在铁页中加载每个部分的数据。 一种方法是使用此类侦听器调用自定义元素的方法（可能使用行为），然后关闭数据。

Answer 2

尝试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 3

首先， PolymerLabs /更多路由库是page.js的不错替代品，并且很容易实现。 由于该库更具声明性，因此您可以执行以下操作：

routes.html

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

APP-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 4

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

• https://github.com/polymerelements/carbon-route
• https://blog.polymer-project.org/announcements/2016/03/28/carbon-route-released/
• https://www.polymer-project.org/1.0/articles/routing.html

这是从Polymer博客中获取的示例：

<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-路由