Пользовательские события в пользовательском интерфейсе Nested Polymer Dart
У меня возникли трудности с концепцией доступа к конкретному CustomEvent.
Вот моя проблема.
у меня естьname-form.html что я импортирую вnok.html а такжеpt.html.
name-form.html имеет пользовательское событие, которое публикует наблюдаемую модель для формы. На эту опубликованную модель затем подписывается подробный параметр CustomEvent. Проблема в том, что у меня есть три разные формы для захвата имени в каждой из них,name-form.html будет запускать то же пользовательское событие.
Я думаю, что мне придется дублироватьnok-form.html 3 раза и измените имя пользовательского события, чтобы прослушать его в соответствующем контексте. Хотя это работает, вы можете увидеть, как код раздут для каждого дублированного файла, просто чтобы изменить опубликованное событие.
Любые идеи, как я мог бы сделать это иначе, будут оценены.
Спасибо
редактировать
Это просто для добавления отсутствующего кода.
нок-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>
нок-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. В настоящее время одно и то же событие отправлено обоим. Как вы можете видеть, данные, собранные в форме имени, представляют два разных имени.