Question

我有一些嵌套的polyers元素，如下所示： - pmk-app.html包含app-header.html和app-overview.html - app-overview.html包含app-main.html 在app-main.html里面我有一个铁-ajax获取一些数据（来自安全的boot spring api）并将其显示在一个表中。在app-header里面我有一个注销按钮。我希望通过单击此按钮进行注销（考虑到我使用基本身份验证，我有一些问题 - 我使用的是休息端点，每当我调用它时返回401，但这个技巧看起来像是并不总是正常运行）并且还要在iron-ajax上触发generateRequest以显示空表（因为注销其余的api正在返回401）（并且还要求用户/来自用户）。我的问题是如何从app-header访问app-main的iron-ajax？到目前为止，我能够使用类似的东西：

    _logout: function(event) {
       this.$.outEndpoint.generateRequest();
       document.body.firstElementChild.$.pages.children.overview.root.firstElementChild.$.get_drafts.generateRequest();
}

但这种结构看起来很奇怪。还有另一种方法吗？谢谢！

Answer 1

我喜欢使用的最简单的技巧是调度窗口事件并将事件监听器添加到目标元素中

应用程序报头：

_logout: function(event) {
       this.$.outEndpoint.generateRequest();
       window.dispatchEvent(new CustomEvent('logged-out'));
}

铁AJAX：

ready() {
  window.addEventListener('logged-out', function(e) {
    //do something here
  })
}

Answer 2

其他选项和想法
这个答案应该显示可用于在分离的DOM元素之间共享状态的不同选项。虽然dshukertjr的答案是正确的，但是当你在整个项目中使用时，使用窗口会变得很乱。

当有深层嵌套元素时，方法相同，“属性向下，事件向上”当您通过许多不需要了解它的元素传递属性/事件时，这种方法会变得混乱和乏味。

另一种方法是使用Redux。 Polymer团队有很多关于如何使用它的文章和视频。他们会在这里： Project Structure for Using Redux with Polymer 2.0

另一篇有趣的文章我发现并建议在努力寻找国家管理的最佳方式时阅读： Share state between separated DOM elements without Redux

如何从＆＃34; parallel＆＃34;访问节点聚合物元素？

2 个答案: