聚合物1.0：铁页不会切换带有儿童事件的页面 [英] Polymer 1.0: iron-pages not switching pages with children events

问题描述

我有一个父组件，在iron-pages组件中有两个子组件。父母应该在收到来自其中一个孩子的事件时切换页面。问题是，当事件到达父组件时，它会执行代码来切换子组件，但没有任何反应。但是，如果代码在父组件本身上执行，那么它就可以工作。

I have a parent component with two children components in an "iron-pages" component. The parent should switch pages when it receives an event from one of the children. The problem is, when the event arrives at the parent component, it executes the code to switch children but nothing happens. But, if the code is executed on the parent component itself, then it works.

我的问题是：为什么父组件在子组件发送时无法切换页面活动？

My question is: Why the parent component is unable to switch pages when a child sends an event?

以下是两个子组件的代码：

Below is the code for the two child components:

// 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>

谢谢......

推荐答案

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

A quick hack to solve this particular problem is to intercept the child event on the parent node, but not let it call the method to switch pages, instead, call the method asynchronous. Below is the working code for the parent node:

<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>

注意：我很想听到为什么我需要这样做，所以我只是不接受这个答案。

Note: I'd love to hear "why" I have to do it, so I'll just leave this answer not accepted.

这篇关于聚合物1.0：铁页不会切换带有儿童事件的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！