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.
