Question

Polymer({})对象中是否有回调可以在每次显示元素时触发？

ready不合适，因为在初始页面加载时创建元素时会调用它。

每次路线改变并显示我的元素时，我都需要一个事件或回调。

为什么我需要这个？如果设置了某个请求参数，我有一个表现不同的元素。所以我需要检查每个负载是否设置了参数。

修改

我通过在路由功能中执行元素显示所需的工作来解决我的需求：

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

Answer 1

与此同时，我也来到了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>

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

Polymer（）中的回调;当元素显示时

2 个答案: