動態創建

我有以下抽屜形式分量動態創建

抽屜form.html

<!DOCTYPE html> 
<link rel="import" href="../../../packages/polymer/polymer.html"> 
<link rel="import" href="../../../packages/paper_elements/paper_icon_button.html"> 
<polymer-element name='drawer-form'> 
    <template> 
    <section id='reg' layout horizontal center> 
     <paper-icon-button 
     icon="menu" 
     id='menu_icon' 
     on-click='{{clickHandler}}'> 
     </paper-icon-button> 
     <h4 id='regLbl'>New Patient</h4> 
    </section> 
    </template> 

    <script type="application/dart"> 
    import 'package:polymer/polymer.dart'; 
    import 'dart:html'; 

    @CustomTag('drawer-form') 
    class DrawerForm extends PolymerElement { 
     @observable bool state = false; 

     DrawerForm.created() : super.created(); 

     void clickHandler() { 
     fire('CREATE_NEW_PATIENT'); 
     } 
    } 
    </script> 
</polymer-element>

抽屜形式是在用於核 - 抽屜面板的主窗口中的新標籤主要形式組成：

主form.html

<!DOCTYPE html> 
<link rel="import" href="../../../packages/polymer/polymer.html"> 
<link rel="import" href="../../../packages/core_elements/core_drawer_panel.html"> 
<link rel="import" href="../../../packages/core_elements/core_icon_button.html"> 
<link rel="import" href="../../../packages/core_elements/core_toolbar.html"> 
<link rel="import" href="../../../packages/paper_elements/roboto.html"> 
<link rel="import" href="../../../packages/core_elements/core_toolbar.html"> 
<link rel="import" href="../../../packages/paper_elements/paper_icon_button.html"> 
<link rel="import" href="../../../packages/fontawesome_elements/fontawesome_icon.html"> 
<link rel="import" href="drawer-form.html"> 

<polymer-element name="main-form"> 
    <template> 
    <core-drawer-panel id="core_drawer_panel"> 
     <section id="drawer" drawer> 
     <drawer-form></drawer-form> 
     </section> 

     <section id="main" main> 
     <core-toolbar id="core_toolbar"> 
      <paper-icon-button 
      icon="menu" 
      id='menu_icon' 
      on-click='{{menu_icon_handler}}'> 
      </paper-icon-button> 
      <div id="div" flex>Toolbar</div> 
     </core-toolbar> 

     <section id='content'></section> 
     </section> 
    </core-drawer-panel> 
    </template> 

    <script type="application/dart"> 
    import 'package:polymer/polymer.dart'; 
    import 'dart:html'; 

    import 'package:core_elements/core_drawer_panel.dart'; 

    @CustomTag('main-form') 
    class MainForm extends PolymerElement { 
     CoreDrawerPanel drawerPanel; 

     MainForm.created() : super.created(); 

     void toggleDrawer() { 
     bool state = drawerPanel.narrow; 
     } 

     void menu_icon_handler() { 
     bool state = drawerPanel.narrow; 
     print (state); 
     } 

     @override 
     void attached() { 
     super.attached(); 
     drawerPanel = $['drawerPanel'] as CoreDrawerPanel; 
     } 
    } 
    </script> 
</polymer-element>

drawer-form.html中的clickHandloer會觸發「CREATE_NEW_PATIENT」事件。我如何在主窗體組件中捕獲此事件以便創建新病人？

來源

2014-07-12 st_clair_clarke

這將是非常有益的，如果你可以從所有剝離代碼不需要重現問題的零件（空行，樣式標籤，不需要重現問題的標籤）。 –

你應該只使用小寫字母和短劃線作爲事件名稱（我最近看到一個錯誤報告，這是行不通的）。

我不認爲任何人都可以捕捉到一個事件從尚未附加到DOM的元素髮射。因此，構造函數是放置'火'代碼的不利位置，請使用attached()（代替super.attached()）。

然後你就可以在代碼中仔細聆聽如

//主窗體

@override 
void attached() { 
    super.attached(); 
    this.shadowRoot.querySelector('drawer-form').on['create-new-patient'].listen((e) { 
    print('create-new-patient received'); 
    } 
}

或聲明

<drawer-form on-create-new-patient='{{myEventHandlerInMainForm}}'>

來源

2014-07-12 12:42:12

感謝Gunter。但元素被附加到DOM。 DOM以抽屜形式構建後，通過clickHandler觸發事件，而不是從構造函數中聲明。當點擊抽屜形式的按鈕時，該事件必須被觸發。 –

對不起，你是對的。我認爲那是在我修正格式之前。我不知何故錯誤地解釋了你的代碼。 –

回答

相關問題