在聚合物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-路由