不在页面中时停用聚合物的页面 [英] Polymer deactivating pages when their not in view

问题描述

我正在使用来自聚合物cli的聚合物应用抽屉模板.

我遇到了一些麻烦:

1. 当您加载新页面时，html元素将被导入；然后执行代码
2. 当我移到另一页时，上一页的代码仍在运行.

有没有办法破坏和创建页面/元素或暂停并启用?

解决此问题的最佳实践是什么?

页面是否实现了create和destroy方法并在更改页面时调用它?

即

oldPageElement.destroy();
newPageElement.create();



Polymer({
  is: 'my-random-page',
  behaviors: [MyBehaviors.CommonPageBehavior],


 /**
  * @override
  */
  create: function() {..}



 /**
  * @override
  */
  destroy: function() {..}

})

解决方案

您实际上不需要实现任何复杂的功能，而只需使用dom-if.

工作原型:http://jsbin.com/gezihatera/edit?html，控制台，输出

如您所见，查看一个"使用了一个自定义页面元素，当重新选择该元素时，该页面元素始终会重新标记.其他页面是普通的div元素，因为这只是最小的原型.但这还表明，您可以有选择地选择对哪些页面进行重新标记，哪些不进行重新标记(如果您并非始终需要此标记).

本质如下:按照 dom-if 文档，如果将restamp属性设置为true，则dom-if将始终在选择/取消选择页面时创建和销毁它们.您可以在控制台中看到这一点，在该控制台中，我在每个ready元素上打印出sample-page ready.我还创建了一个辅助函数_equals，以帮助比较是否确实选择了指定的页面.

总结一下，让我粘贴该应用程序的代码:

<dom-module id="sample-app">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <iron-selector selected="{{page}}" attr-for-selected="name">
            <a name="view1" href="#">View One</a>
            <a name="view2" href="#">View Two</a>
            <a name="view3" href="#">View Three</a>
        </iron-selector>

        <iron-pages role="main" selected="[[page]]" attr-for-selected="name">
            <template is="dom-if" if="[[_equals(page, 'view1')]]" restamp="true">
                <sample-page name="view1">view1</sample-page>
            </template>
            <div name="view2">view2</div>
            <div name="view3">view3</div>
        </iron-pages>
    </template>
    <script>
        Polymer({
            is: 'sample-app',
            _equals: function(a, b) {
                return a == b;
            },
        });
    </script>
</dom-module>

以及示例页面的代码:

<dom-module id="sample-page">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <content></content>
    </template>
    <script>
        Polymer({
            is: 'sample-page',
            ready: function() {
                console.log('sample-page ready');
            },
        });
    </script>
</dom-module>

希望这能满足您的问题.

注意:您应该不要将name属性放在dom-if本身上，而应放在其内容上(与我一样).

I'm using the polymer application drawer template from the polymer cli.

I'm having some trouble with:

1. When you load a new page, the html element is imported; then it's code executes
2. When I move to another page the code for the previous page is still running.

Is there a way to destroy and create the page/element or suspend and enable?

Whats the best practice for dealing with this problem?

Have the pages implement a create and destroy method and invoke it when changing page?

Ie

oldPageElement.destroy();
newPageElement.create();



Polymer({
  is: 'my-random-page',
  behaviors: [MyBehaviors.CommonPageBehavior],


 /**
  * @override
  */
  create: function() {..}



 /**
  * @override
  */
  destroy: function() {..}

})

解决方案

You actually don't need to implement anything complicated, but just use a mere dom-if.

Working prototype: http://jsbin.com/gezihatera/edit?html,console,output

As you can see, the "View One" uses a custom page element, which is always restamped when re-selected. Other pages are ordinary div elements, since this is only a minimal prototype. But this also shows that you can selectively choose which pages get restamped and which do not (if you don't always need this).

The essence is the following: as per dom-if documentation, if you set the restamp attribute to true, then the dom-if will always create and destroy your pages upon selecting/deselecting them. You can see this in the console, where I print out sample-page ready on every ready element. I also create a helper function _equals to help with comparing whether the specified page is really selected.

To sum up, let me paste the code for the app:

<dom-module id="sample-app">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <iron-selector selected="{{page}}" attr-for-selected="name">
            <a name="view1" href="#">View One</a>
            <a name="view2" href="#">View Two</a>
            <a name="view3" href="#">View Three</a>
        </iron-selector>

        <iron-pages role="main" selected="[[page]]" attr-for-selected="name">
            <template is="dom-if" if="[[_equals(page, 'view1')]]" restamp="true">
                <sample-page name="view1">view1</sample-page>
            </template>
            <div name="view2">view2</div>
            <div name="view3">view3</div>
        </iron-pages>
    </template>
    <script>
        Polymer({
            is: 'sample-app',
            _equals: function(a, b) {
                return a == b;
            },
        });
    </script>
</dom-module>

And the code for the sample page:

<dom-module id="sample-page">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

        <content></content>
    </template>
    <script>
        Polymer({
            is: 'sample-page',
            ready: function() {
                console.log('sample-page ready');
            },
        });
    </script>
</dom-module>

Hope this satisfies your question.

Note: you should not put the name attribute on the dom-if itself, but rather onto its content (the same way I did).

这篇关于不在页面中时停用聚合物的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！