聚合物1.0:铁页，不带子事件切换页

Polymer 1.0: iron-pages not switching pages with children events

本文关键字：事件 换页 铁页 聚合物      更新时间：2023-09-26

在一个"iron-pages"组件中有一个父组件和两个子组件。当父进程从其中一个子进程接收到事件时，它应该切换页面。问题是，当事件到达父组件时，它执行代码来切换子组件，但什么也没有发生。但是，如果代码是在父组件本身上执行的，那么它就可以工作了。

我的问题是:当子组件发送事件时，为什么父组件无法切换页面?

下面是两个子组件的代码: 
// this is "child-comm.html"
<link rel="import"
      href="bower_components/polymer/polymer.html">
<dom-module id="child-comm">
    <style>
        div {
        width: 300px;
        height: 300px;
        background-color: #CCC;
        }
    </style>
    <template>
        <div>I'm child 0!</div>
    </template>
</dom-module>
<script>
 Polymer({
     is: "child-comm",
     listeners: {
         'tap': 'doTap'
     },
     doTap: function() {
         this.fire("taped-child")
     }
 });
</script>

和另一个子:

this is "child-comm2.html"
<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="child-comm2">
    <style>
        div {
        width: 300px;
        height: 300px;
        background-color: #C00;
        }
    </style>
    <template>
        <div>I'm child 2!</div>
    </template>
</dom-module>
<script>
 Polymer({
     is: "child-comm2",
     listeners: {
         'tap': 'doTap'
     },
     doTap: function() {
         this.fire("taped-child")
     }
 });
</script>

然后我们有父组件:

<link rel="import"
      href="bower_components/polymer/polymer.html">
<link rel="import"
      href="child-comm.html">
<link rel="import"
      href="child-comm2.html">
<link rel="import"
      href="bower_components/iron-pages/iron-pages.html">
<dom-module is="parent-comm">
    <template>
        <iron-pages selected="0">
            <child-comm on-taped-child="switchPages"></child-comm>
            <child-comm2 on-taped-child="switchPages"></child-comm2>
        </iron-pages>
    </template>
</dom-module>
<script>
 Polymer({
     is: "parent-comm",
     switchPages: function(e) {
         this.pages.selectNext(); // this will not work if the event is created in a child component
         console.log(this.pages); // this will print the correct node on console even when being fired by a child custom event
     },
     ready: function() {
         this.pages = document.querySelector('iron-pages');
         this.switchPages(); // this will switch pages correctly
         console.log(this.pages);
     }
 });
</script>

谢谢…

解决这个特殊问题的一个快速方法是在父节点上拦截子事件，但不让它调用方法来切换页面，而是异步调用方法。下面是父节点的工作代码:

<dom-module is="parent-comm">
    <template>
        <iron-pages selected="0">
            <child-comm on-taped-child="asyncSwitchPages"></child-comm>
            <child-comm2 on-taped-child="asyncSwitchPages"></child-comm2>
        </iron-pages>
    </template>
</dom-module>
<script>
 Polymer({
     is: "parent-comm",
     switchPages: function() {
         this.pages.selectNext();
     },
     asyncSwitchPages: function(e) {
         this.async(this.switchPages);
     },
     ready: function() {
         this.pages = document.querySelector('iron-pages');
     }
 });
</script>

注:我很想听到"为什么"我必须这样做，所以我就不接受这个答案了

我认为您需要侦听自定义事件。尝试将下面的代码添加到parent的ready函数中。

this.addEventListener('taped-child', function(e) { this.switchPages(); });

相关文章：