4

Is there a callback available in the Polymer({}) object which fires everytime the element is shown ?

ready is not suitable because it's called when the element is created on initial page load.

I need an event or callback every time the route changes and my element is displayed.

Why do I need this ? I have an element which is behaving differently if a certain request parameter is set. So I need to check on each load whether the parameter is set or not.

Edit:

I worked around my requirement by doing the stuff I need to be done on element display in my routing functions:

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

2 Answers 2

Reset to default
0

In the meantime I came also accross app-route which as well has functionality to call methods on route or view changes.

You can read about it here:

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

Here is a working example: 

<!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>
Improve this answer
-2

Maybe the attached callback is what you're looking for. This lifecycle callback is called when an element is attached to the DOM and should therefore be the right choice. It is always called after the ready callback.

From the polymer docs: 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
   });
}
Improve this answer
3
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.
    – Leistungsabfall
    Commented Aug 29, 2015 at 8:01
  • 1
    @Leistungsabfall You're absolutely right. Thanks for making me aware of this. I updated my answer.
    – Peter Ka
    Commented Aug 29, 2015 at 9:05
  • The "attached" callback does not do what I need since it's called only once per page load. I need an event everytime the element is shown (i.e. when the route changes to display it) I might simply go an get te routing method abused to get my callback.
    – yglodt
    Commented Aug 31, 2015 at 11:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.