Eventos personalizados en Nested Polymer Dart UI

Question

Jan 02, 2014, 09:15 PM

Eventos personalizados en Nested Polymer Dart UI

Estoy teniendo algunas dificultades para conceptualizar cómo acceder a un CustomEvent específico.

Aquí está mi problema.

tengo unname-form.html que yo importe ennok.html ypt.html.

name-form.html Tiene un evento personalizado que publica el modelo observable para el formulario. Este modelo publicado luego se suscribe al parámetro de detalle del CustomEvent. El problema es que tengo tres formas diferentes para capturar un nombre cada una con un contexto diferente,name-form.html Se disparará el mismo evento personalizado.

Mis pensamientos son que tendré que duplicar elnok-form.html 3 veces y cambie el nombre del evento personalizado para escucharlo en el contexto apropiado. Aunque esto funciona, puede ver cómo se infla el código para cada archivo duplicado, solo para cambiar el evento publicado.

Cualquier idea de cómo podría lograr esto de otra manera sería apreciada.

Gracias

editar

Esto es sólo para agregar el código que falta.

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

  }

Pregunta: ¿Cómo puedo obtener name-form.html para enviar el CustomEvent a nok-form.html o patient-form.html? Actualmente el mismo evento se envía a ambos. Como puede ver, los datos recopilados por la forma de nombre representan dos nombres diferentes.