如何在Polymer中调度和监听自定义事件？ [英] How do you dispatch and listen for custom events in Polymer?
本文介绍了如何在Polymer中调度和监听自定义事件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要一个子元素分派一个自定义事件和父元素来监听它，并采取一些行动。
解决方案
您可以从聚合物元素派发自定义事件，如下所示： / p>
dispatchEvent（new CustomEvent（'nameOfEvent'））;然后，父元素可以监听自定义事件，如下所示：
< child-element on-childspeaks =fireAway>< / child-element>
这里是一个更完整的例子，首先，下面是子元素的代码：
<！DOCTYPE html>
< polymer-element name =child-element>
< template>
< div on-click =dispatch>我是孩子< / div>
< / template>
< script type =application / dart>
import'dart：html';
import'package：polymer / polymer.dart';
@CustomTag（'child-element'）
class ChildElement使用ObservableMixin扩展PolymerElement {
dispatch（Event e，var detail，Node sender）{
print（'dispatching from child'）;
dispatchEvent（new CustomEvent（'childspeaks'））;
}
}
< / script>
< / polymer-element>
这里是父元素的代码：
<！DOCTYPE html>
< link rel =importhref =child_element.html>
< polymer-element name =parent-element>
< template>
< div>我是父级< / div>
< child-element on-childspeaks =fireAway>< / child-element>
< / template>
< script type =application / dart>
import'dart：html';
import'package：polymer / polymer.dart';
@CustomTag（'parent-element'）
class ParentElement extends PolymerElement with ObservableMixin {
void fireAway（）{
window.alert孩子说话，我听到'）;
}
}
< / script>
< / polymer-element>
I want a child element to dispatch a custom event and the parent element to listen for it, and take some action. How do I do this when working with Polymer?
解决方案 You can dispatch a custom event from a polymer-element like this:
dispatchEvent(new CustomEvent('nameOfEvent'));
Then, parent element can listen for the custom event like this:
<child-element on-childspeaks="fireAway"></child-element>
Here is a more complete example showing how this works. First, here is the code for the child element:
<!DOCTYPE html>
<polymer-element name="child-element">
<template>
<div on-click="dispatch">I am a child</div>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';
@CustomTag('child-element')
class ChildElement extends PolymerElement with ObservableMixin {
dispatch(Event e, var detail, Node sender) {
print('dispatching from child');
dispatchEvent(new CustomEvent('childspeaks'));
}
}
</script>
</polymer-element>
And here is the code for the parent element:
<!DOCTYPE html>
<link rel="import" href="child_element.html">
<polymer-element name="parent-element">
<template>
<div>I am the parent</div>
<child-element on-childspeaks="fireAway"></child-element>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';
@CustomTag('parent-element')
class ParentElement extends PolymerElement with ObservableMixin {
void fireAway() {
window.alert('The child spoke, I hear');
}
}
</script>
</polymer-element>
这篇关于如何在Polymer中调度和监听自定义事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
