聚合物在不在视图中时停用页面

Question

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

我遇到了一些麻烦:

1. 加载新页面时,将导入html元素; 然后它的代码执行
2. 当我移动到另一个页面时,上一页的代码仍在运行.

有没有办法销毁和创建页面/元素或暂停和启用？

什么是处理这个问题的最佳做法？

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

即

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



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


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



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

})

Answer 1

你实际上不需要实现任何复杂的东西,但只需使用一个dom-if.

工作原型:http://jsbin.com/gezihatera/edit？html,console,output

如您所见,"View One"使用自定义页面元素,重新选择时始终重新缓存.其他页面是普通div元素,因为这只是一个最小的原型.但是这也表明你可以有选择地选择哪些页面得到重新放大,哪些页面没有(如果你并不总是需要这样).

其实质如下:根据dom-if文档,如果将restamp属性设置为true,则dom-if在选择/取消选择时,将始终创建和销毁页面.你可以在控制台中看到这个,我打印出sample-page ready每个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本身,而是在它的内容(方法同我一样).