聚合物1.0：鐵頁面沒有切換頁面與兒童事件

我有一個父組件在「鐵頁」組件中有兩個子組件。家長在收到其中一個孩子的事件時應該切換頁面。問題是，當事件到達父組件時，它會執行代碼來切換子組件，但沒有任何反應。但是，如果代碼在父組件本身上執行，那麼它就可以工作。聚合物1.0：鐵頁面沒有切換頁面與兒童事件

我的問題是：爲什麼父組件在孩子發送事件時無法切換頁面？

下面是兩個子組件代碼：

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

謝謝...

來源

2015-06-06 Allan Hasegawa

我認爲你需要傾聽自定義事件。嘗試將以下內容添加到父母的就緒功能中。

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

來源

2015-06-07 15:38:01

謝謝，但是當console觸發自定義事件時，console.log（this.pages）'會在控制檯上打印正確的節點，所以我相信該事件正如預期的那樣被父組件捕獲。在上面的代碼中添加了額外的註釋。 –

快速黑客解決這個特定的問題是攔截父節點的子事件，但不能讓它調用該方法來切換頁面，而是調用方法異步。下面是父節點的工作代碼：

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

注意：我很想聽聽「爲什麼」我必須這樣做，所以我就離開這個答案不被接受。

來源

2015-06-07 19:18:25

聚合物1.0：鐵頁面沒有切換頁面與兒童事件

回答

相關問題