Question

我使用聚合物cli的聚合物应用抽屉模板。

我遇到了一些问题：

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

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

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

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

即

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



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


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



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

})

Answer 1

您实际上并不需要实施任何复杂的操作，只需使用$(document).on('click touchstart','.btn-save',function(e){ e.preventDefault(); var id =$(this).attr('data-id'); //Get data id var comment =$('.txt-comment').val(); //get the comment var modifiers =$('.txt-modifiers').val(); //get the modifier //update the "order" note column modal var note_modal = '#' + $(this).attr('data-id_modall'); //get the id row of the order modal var note_modal2 = '#2' + $(this).attr('data-id_modall'); //get the id row of the order modal $(note_modal).find('#note_modal').text(comment+'--'+modifiers); $(note_modal2).find('#note_modal2').text(comment+'--'+modifiers); $('#'+id).attr('data-comment',comment); $('#'+id).attr('data-modifiers',modifiers); //Save it in data base..s $('#modal').dialog('close'); $('.txt-comment').val('');//clear text area $('.txt-modfiers').val('');//clear text area }); $(document).on('click','.btn-default',function(e){ e.preventDefault(); //Save it in data base..s $('#modal').dialog('close'); $('.txt-comment').val('');//clear text area $('.txt-modfiers').val('');//clear text area });。

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

正如您所看到的，＆＃34; View One＆＃34;使用自定义页面元素，重新选择时始终重新缓存。其他页面是普通的dom-if元素，因为这只是一个最小的原型。但这也表明你可以有选择地选择哪些页面得到重新安排，哪些页面不重新安装（如果你不总是需要这样）。

本质如下：根据dom-if文档，如果您将div属性设置为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本身，而是置于其内容上（就像我做的那样））。

Answer 2

以为我会在实施@ alesc＆＃39; s dom-if之后发布我的解决方案，以便让元素停用。

// after a successful importHref, _pageLoaded is called.
_pageLoaded: function(pageName) {
  var name = 'my-' + pageName;
  this.async(function() {
    // async to wait for element restamping, if done
    var pages = this.$.pages;
    var page = pages.querySelector(name);
    page.load()
    .then(page.isAuthorized.bind(this))
    .catch(this._catchPageIsAuthorizedError.bind(this))
    .then(this._shouldSetPage.bind(this, pageName));
  }.bind(this));
}

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

2 个答案: