Question

我有以下抽屉式组件

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

抽屉式form.html中的clickHandloer会触发＆＃39; CREATE_NEW_PATIENT＆＃39;事件。如何在主窗体组件中捕获此事件以动态创建新患者？

Answer 1

你应该只使用小写字符和破折号作为事件名称（我最近看到一个错误报告，它不起作用）。

我认为任何人都无法捕获从尚未附加到DOM的元素触发的事件。因此，构造函数是放置“火”的好地方。代码，使用attached()（super.attached()之后）代替。

然后你可以用

这样的代码收听

// main-form

@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}}'>

在核心抽屉面板的主窗口中动态创建新标签

1 个答案: