嵌套聚合物Dart UI中的自定义事件 [英] Custom Events in Nested Polymer Dart UI
问题描述
我在构思如何存取特定CustomEvent时遇到一些困难。
这是我的问题。
我有一个在 nok.html 和 pt中导入的。 name-form.html .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'>第一个< / 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名称名称= new Name（）;
NameForm.created（）：super.created（）;
void submit（event e，var detail，Node target）
{
$ ['submit-btn']。
$ ['form']。onSubmit
.listen（（e）
{
dispatchEvent（new CustomEvent（'nameEvent'，detail：name）
e.preventDefault（）;
}）;
}
}
< / script>
< / polymer-element>
nok-form.html
<！DOCTYPE html>
< link rel =importhref =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'）
类NokForm扩展PolymerElement
{
NokForm.created ）：super.created（）;
void useModel（CustomEvent e，var detail，Node target）
{
//此输出将与病人表单
//相同，因为事件细节是一样的
print（e.detail.fistname）;
}
}
< / script>
< / polymer-element>
patient-form.html
<！DOCTYPE html>
< link rel =importhref =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）
{
//此输出将与nok-form
//相同，因为事件细节是一样的
print（e.detail.fistname）;
}
}
< / script>
< / polymer-element>
类名称
{
String firstname ='';
}
问题：获取name-form.html将CustomEvent发送到nok-form.html或patient-form.html。当前相同的事件发送到两者。
我想你应该设置一个属性，元素的标记，并将此值与事件详细信息一起发送。这样，接收者就会收到有助于决定他是否应该处理事件的元数据。
如
< name-form id ='name-form'fieldname =firstnameon-nameEvent = {{useModel}}> ;< / name-form>
< name-form id ='name-form'fieldname =lastnameon-nameEvent = {{useModel}}>< / name-form>
或
< name-form id ='name-form'reciever =patient-formon-nameEvent = {{useModel}}>< / name-form>
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.
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.
like
<name-form id='name-form' fieldname="firstname" on-nameEvent={{useModel}}></name-form>
<name-form id='name-form' fieldname="lastname" on-nameEvent={{useModel}}></name-form>
or
<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中的自定义事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
