Question

我在构思如何访问特定的CustomEvent时遇到了一些困难。

这是我的问题。

我在name-form.html和nok.html中导入pt.html。

name-form.html有一个自定义事件，用于发布表单的可观察模型。然后，通过CustomEvent的detail参数订阅此已发布的模型。问题是虽然我有三种不同的形式来捕获每个具有不同上下文的名称，name-form.html将触发相同的自定义事件。

我的想法是，我将不得不复制nok-form.html 3次并更改自定义事件名称，以便在适当的上下文中听取它。虽然这很有效，但您可以看到代码如何为每个重复文件变得臃肿，只是为了更改已发布的事件。

任何有关我如何能够完成此任务的想法都将不胜感激。

由于

修改

这只是添加丢失的代码。

NOK-form.html

    <!DOCTYPE html>

    <polymer-element name='name-form'>
      <template>
        <form>
         <section id='first'>
           <label for='firstTxt' >First</label>

            <input id='first-name'
             name='first-name'
             type="text"
             value="{{name.first}}"
             required
             on-change='{{submit}}'>
          </section>

            <button id='submit-btn'
              type='submit'></button>
          </form>
       </template>

       <script type="application/dart">

        import 'package:polymer/polymer.dart';
        import 'dart:html';



        @CustomTag( 'name-form' )
        class NameForm extends PolymerElement
        {

          @observable Name  name = new Name();

          NameForm.created() : super.created();

          void submit ( Event e, var detail, Node target )
          {


            $[ 'submit-btn' ].click();

            $['form'].onSubmit
              .listen( ( e )
                  {
                    dispatchEvent(new CustomEvent('nameEvent', detail:name ) );
                    e.preventDefault();
                  });
          }
        }

      </script>
    </polymer-element>

NOK-form.html

  <!DOCTYPE html>

  <link rel="import" href="name-form.html">

  <polymer-element name='nok-form'>
    <template>

      <name-form id='name-form' on-nameEvent={{useModel}}></name-form>


     </template>

     <script type="application/dart">

      import 'package:polymer/polymer.dart';
      import 'dart:html';


      @CustomTag( 'nok-form' )
      class NokForm extends PolymerElement
      {


        NokForm.created() : super.created();

        void useModel ( CustomEvent e, var detail, Node target )
        {
          // This output will be the same as for patient-form
          // since the event detail is the same
          print ( e.detail.fistname );
        }

      }

    </script>
  </polymer-element>

患者form.html

  <!DOCTYPE html>

  <link rel="import" href="name-form.html">

  <polymer-element name='patient-form'>
    <template>

      <name-form id='name-form' on-nameEvent={{useModel}}></name-form>


     </template>

     <script type="application/dart">

      import 'package:polymer/polymer.dart';
      import 'dart:html';


      @CustomTag( 'patient-form' )
      class PatientForm extends PolymerElement
      {


        PatientForm.created() : super.created();

        void useModel ( CustomEvent e, var detail, Node target )
        {
          // This output will be the same as for nok-form
          // since the event detail is the same
          print ( e.detail.fistname );
        }

      }

    </script>
  </polymer-element>


 class Name
 {
    String firstname = '';

  }

问题：如何让name-form.html将CustomEvent发送到nok-form.html或patient-form.html。目前，同一事件被发送给两者。正如您所看到的，由名称形式的代理人收集的数据有两个不同的名称。

Answer 1

我认为你应该在Element的标记中设置一个属性，并将此值与事件详细信息一起发送。这样接收器就会接收元数据，这有助于决定他是否应该处理事件。

像

<name-form id='name-form' fieldname="firstname" on-nameEvent={{useModel}}></name-form>
<name-form id='name-form' fieldname="lastname" on-nameEvent={{useModel}}></name-form>

或

<name-form id='name-form' reciever="nok-form" on-nameEvent={{useModel}}></name-form>
<name-form id='name-form' reciever="patient-form" on-nameEvent={{useModel}}></name-form>

嵌套聚合物Dart UI中的自定义事件

1 个答案: