在聚合物1.0中布线 [英] Routing in polymer 1.0

问题描述

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

I am new to web development and building an application using polymer 1.0.4. I am using the page.js routing similar to the example in start kit. Now many of the custom element that I built are using ajax and periodically refresh the data. The problem with page.js routing that It seems it loads all custom elements even if the element is not viewed by user. so all custom elements are loading the data even if it is not needed. my questions:

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

1- How could I fix this so the the elements load data only when they are viewed by the end users? Should I change the routing to another options like more-routing?

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

2- if the user filled the data in one custom element , then clicked on link to another element. The data will remains when the user goes back to the first custom element? How could I reset the polymer and html elements in the custom element when the use back to an old view?

推荐答案

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

Firstly, the PolymerLabs/more-routing library is a nice alternative to page.js and is quite easy to implement. As this library is more declarative you can do things like:

routes.html

routes.html

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

app-element.html

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

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应用.

Check out the polyfora app in the demo folder of the repository.

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

Otherwise, to use page.js I would consider:

• 删除自定义元素中的所有自动iron-ajax查询；
• 将state属性传递给自定义元素；
• 在每个自定义元素中的所有state更改中添加观察者，从而触发函数运行任何iron-ajax查询.

• Remove any auto iron-ajax queries in custom elements;
• Pass a state attribute to custom elements;
• Add an observer to any state changes within each custom element which triggers a function to run any iron-ajax queries.

这篇关于在聚合物1.0中布线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！