动态创建

我有以下抽屉形式分量动态创建

抽屉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触发事件，而不是从构造函数中声明。当点击抽屉形式的按钮时，该事件必须被触发。 –

对不起，你是对的。我认为那是在我修正格式之前。我不知何故错误地解释了你的代码。 –

回答

相关问题