2015-08-27 66 views
3

Polymer({})對象中是否有可用的回調,每次顯示元素時都會觸發對象?聚合物回調();何時顯示元素

ready不適合,因爲它是在初始頁面加載時創建元素時調用的。

每當路線發生變化並顯示我的元素時,我都需要事件或回調。

爲什麼我需要這個?如果設置了某個請求參數,我有一個表現不同的元素。所以我需要檢查每個負載是否設置參數。

編輯:

我工作圍繞我的要求做我需要在我的路由功能元素顯示上完成的東西:

page("/app/list", function() { 
    document.querySelector("my-list").$.loadList.generateRequest(); 
    app.route = "list"; 
}); 

回答

-2

也許attached回調是你是什麼尋找。 當元素連接到DOM時調用此生命週期回調,因此應該是正確的選擇。它總是在ready回調後調用。

從聚合物文檔: https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-order

attached: function() { 
    this.async(function() { 
     // access sibling or parent elements here 
    }); 
} 
+0

雖然這種聯繫可以回答這個問題,最好是包括的主要部分在這裏回答並提供參考鏈接。如果鏈接頁面更改,則僅鏈接答案可能會失效。 – Leistungsabfall

+1

@Leistungsabfall你是對的。謝謝你讓我意識到這一點。我更新了我的答案。 –

+0

「附加」回調沒有做我所需要的,因爲每頁加載只調用一次。每次顯示元素時,我都需要一個事件(即當路由改變以顯示它時)我可能會簡單地使用get te路由方法來濫用我的回調。 – yglodt

0

在我來到的同時還進行的跨app-route,其除了具有以下功能:呼籲路線或觀點的改變方法。

你可以閱讀一下:

https://www.polymer-project.org/1.0/toolbox/routing#take-action-on-route-changes

這裏是一個工作示例:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="bower_components/polymer/polymer.html" /> 
    <link rel="import" href="bower_components/app-route/app-location.html" /> 
    <link rel="import" href="bower_components/app-route/app-route.html" /> 
    <link rel="import" href="bower_components/iron-pages/iron-pages.html" /> 
</head> 
<body> 
    <container-element></container-element> 
</body> 
</html> 

<dom-module id="container-element"> 
    <template> 
     <app-location route="{{route}}" use-hash-as-path></app-location> 
     <app-route route="{{route}}" pattern=":view" data="{{routeData}}"></app-route> 
     <a href="#page1">Page 1</a> | <a href="#element1">Page 2</a> 
     <iron-pages selected="[[routeData.view]]" attr-for-selected="name"> 
      <div name="page1">This is Page 1.</div> 
      <x-element1 name="element1"></x-element1> 
     </iron-pages> 
    </template> 
    <script type="text/javascript"> 
    Polymer({ 
     is : "container-element", 
     observers : [ "_viewChanged(routeData.view)" ], 
     _viewChanged : function(view) { 
      if (view) { 
       if (view === "element1") { 
        document.querySelector("x-element1").test(); 
       } 
      } 
     } 
    }); 
    </script> 
</dom-module> 

<dom-module id="x-element1"> 
    <template><p>This is Element 1.</p></template> 
    <script type="text/javascript"> 
     Polymer({ 
      is : "x-element1", 
      test : function() { 
       console.log("Callback of Element 1 called."); 
      } 
     }); 
    </script> 
</dom-module>