Polymer() 中的回调；显示元素时

Question

Is there a callback available in the Polymer({}) object which fires everytime the element is shown ? Polymer({})对象中是否有可用的回调，每次显示元素时都会触发？

ready is not suitable because it's called when the element is created on initial page load. ready不合适，因为它是在初始页面加载时创建元素时调用的。

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";
});

Answer 1

In the meantime I came also accross app-route which as well has functionality to call methods on route or view changes.与此同时，我也来到了app-route ，它也具有调用路由方法或查看更改的功能。

You can read about it here:你可以在这里读到它：

https://www.polymer-project.org/1.0/toolbox/routing#take-action-on-route-changes 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>

Answer 2

Maybe the attached callback is what you're looking for.也许attached回调是您正在寻找的。 This lifecycle callback is called when an element is attached to the DOM and should therefore be the right choice.当元素附加到 DOM 时会调用此生命周期回调，因此应该是正确的选择。 It is always called after the ready callback.它总是在ready回调之后调用。

From the polymer docs: https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-order来自聚合物文档： 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
   });
}

Polymer() 中的回调；显示元素时

问题描述

2 个解决方案

解决方案1
0 2017-05-30 08:45:31

解决方案2
-2 2015-08-29 07:14:50

Polymer() 中的回调； 显示元素时

问题描述

2 个解决方案

解决方案1 0 2017-05-30 08:45:31

解决方案2 -2 2015-08-29 07:14:50

Polymer() 中的回调；显示元素时

解决方案1
0 2017-05-30 08:45:31

解决方案2
-2 2015-08-29 07:14:50