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

Question

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

javascripthtmlpolymerweb-component

4

Polymer({})对象中是否有回调函数可用，每当元素显示时触发？ ready不适合，因为它在初始页面加载时创建元素时调用。

我需要一个事件或回调函数，每次路由更改并且我的元素被显示时都会触发。

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

编辑：通过在我的路由函数中执行我需要执行的操作来解决我的要求。

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

- yglodt

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yglodt · 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>

- Peter Ka · Answer 2

也许你正在寻找的是 attached 回调函数。当元素附加到 DOM 树时，该生命周期回调函数被调用，因此应该是正确的选择。它总是在 ready 回调函数之后被调用。

来自 Polymer 文档： 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
   });
}