Polymer 1.0：如何在不使用< iron-signals>？的情况下将事件传递给子节点元素？ [英] Polymer 1.0: How to pass an event to a child-node element without using <iron-signals>?
本文介绍了Polymer 1.0：如何在不使用< iron-signals>？的情况下将事件传递给子节点元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
此Stack Overflow答案建议使用< iron-signals> 将DOM树中的事件广播到自定义元素。
This Stack Overflow answer suggests using <iron-signals> to broadcast an event down the DOM tree to a custom element.
下面，我问一个不同的问题。
Below, I ask a different question.
我如何：
How do I:
- 从父级（自定义元素）将事件传递给直接子节点（自定义元素）
- 不使用
< iron-signals>？
- pass an event down to a direct child node (custom element)
- from a parent (custom element)
- without using
<iron-signals>?
代码
这是我到目前为止所拥有的。但它不起作用。
Code
This is what I have so far. But it doesn't work.
<dom-module id="parenet-element">
<template is="dom-bind">
<child-element></child-element>
<paper-button on-tap="_handleTap"></paper-button>
</template>
</dom-module>
<script>
(function(){
Polymer({
is: 'parenet-element',
_handleTap: function() {
this.fire("my-event");
}
});
})();
</script>
child-element.html
child-element.html
<dom-module id="child-element">
...
</dom-module>
<script>
(function(){
Polymer({
is: 'child-element',
listeners: {
"my-event": "foo"
},
foo: function(){
// Do stuff
}
});
})();
</script>
推荐答案
你绝对可以。没有铁信号你有三个选项（我目前知道）：
You definitely can. Without iron-signals you've got three options (that I currently know of):
- 获取父级并让孩子将事件监听器附加到父级
- 父级可以让孩子触发相同的事件
- 您提到事件只会上升。然后你可以让子元素听取
文件解雇那个事件（但我觉得这很糟糕）
- Get the parent and have the child attach an event listener to the parent
- The parent can have the child fire the same event
- You mentioned that events only go up. You can then make the child element listen to the
documentfiring that event (but I think this is bad)
这是一个例子
<!doctype html>
<html>
<head>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="parent-element">
<template>
<child-element></child-element>
<button id="btn" on-tap="_fireParentEvent1">Fire 1!</button>
<button id="btn" on-tap="_fireParentEvent2">Fire 2!</button>
<button id="btn" on-tap="_fireParentEvent3">Fire 3!</button>
</template>
</dom-module>
<dom-module id="child-element">
<template>
<style>
:host {
display: block;
}
</style>
<span id="changeMe">Message</span>
</template>
</dom-module>
<parent-element></parent-element>
<script>
(function registerElements() {
Polymer({
is: 'parent-element',
listeners: {
'event-two': '_attachToChild'
},
_attachToChild: function(e) {
// the parent makes the child fire an event
var childElement = Polymer.dom(this.root).querySelector('child-element');
childElement.fire('event-two', e.detail);
},
_fireParentEvent1: function(e) {
// the parent fires an event
this.fire('event-one', {
message: 'hello'
});
},
_fireParentEvent2: function(e) {
this.fire('event-two', {
message: 'goodbye'
});
},
_fireParentEvent3: function(e) {
// the parent fires an event
this.fire('event-three', {
message: 'game over'
});
}
});
Polymer({
is: 'child-element',
listeners: {
'event-two': '_handleEventTwo'
},
ready: function() {
var parent = this.parentNode;
// the child listens to the parent's event
parent.addEventListener('event-one', function(e) {
this.$.changeMe.innerHTML = e.detail.message;
}.bind(this));
// listen to the document level event (since events travel up)
// but this option is difficult to control
document.addEventListener('event-three', function(e) {
this.$.changeMe.innerHTML = e.detail.message;
}.bind(this));
},
_handleEventTwo: function(e) {
this.$.changeMe.innerHTML = e.detail.message;
}
});
})();
</script>
</body>
</html>
这篇关于Polymer 1.0：如何在不使用< iron-signals>？的情况下将事件传递给子节点元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
