Custom Events in Nested Polymer Dart UI

问题

I am having some difficulty conceptualizing how to access a specific CustomEvent.

Here is my issue.

I have a name-form.html that I import in nok.html and pt.html.

name-form.html has a custom event that publishes the observable model for the form. This published model is then subscribed to by the detail parameter of the CustomEvent. The problem is although I have three different forms to capture a name each with a different context, name-form.html will fire the same custom event.

My thoughts are that I will have to duplicate the nok-form.html 3 times and change the custom-event name to listen to it it the appropriate context. Although this works, you can see how the code gets bloated for each duplicated file, just to change the published event.

Any ideas how I could accomplished this otherwise would be appreciated.

Thanks

edit

This is just to add the missing code.

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>

patient-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 = '';

  }

Question: How can I get the name-form.html to send the CustomEvent to either nok-form.html or patient-form.html. Currently the same event is sent to both. As you can see the data collected by the name-form reprsents two different names.

回答1:

I think you should set an attribute in markup of the Element and send this value with the event details. This way the receiver receives meta data that helps to decide if he should process the event.

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

来源：https://stackoverflow.com/questions/20891046/custom-events-in-nested-polymer-dart-ui

标签

dart

dart-polymer