来自遥远节点的聚合物事件
我正在努力熟悉聚合物，并且一直在努力尝试用它构建一个示例应用程序。按照https://www.dartlang.org/docs/tutorials/polymer-intro的教程和阅读其他StackOverflow问题(如如何从聚合物Dart引发定制事件？ )，我成功地构建了两个元素，其中一个元素触发了由第二个元素执行的事件。但是，我只能在激发元素是侦听元素的子元素的情况下才能知道如何做到这一点。例如，如下所示
foo.html
<link rel="import" href="bar.html">
<polymer-element name="foo">
<template>
<my-bar on-myevent="{{react}}"></mybar>
</template>
<script type="application/dart" src="foo.dart"></script>
</polymer-element>foo.dart
@CustomTag('my-foo')
class Foo extends PolymerElement {
Foo() {}
Foo.created() : super.created();
void react() {
print("Event happened and was heard!");
}
}bar.html
<polymer-element name="bar">
<template>
<button on-click="{{click}}"></button>
</template>
<script type="application/dart" src="bar.dart"></script>
</polymer-element>bar.dart
@CustomTag('my-bar')
class Bar extends PolymerElement {
Bar() {}
Bar.created() : super.created();
void click(Event e, var details, Node node) {
print("Triggering event");
fire('my-event');
}
}index.html
<!DOCTYPE html>
<html>
<head>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
<link rel="import" href="foo.html">
</head>
<body>
<div id="content">
<foo></foo>
</div>
</body>
</html>我想要做的是能够将bar按钮移出foo元素，就像在我想要设计的应用程序中一样，我希望输入控件存在于页面的一个独立区域，而不是主输出显示( foo元素)。基本上，我想让foo.html和index.html看起来像这样：
foo.html
<polymer-element name="foo">
<template>
<!-- Databound output stuff here -->
</template>
<script type="application/dart" src="foo.dart"></script>
</polymer-element>index.html
<!DOCTYPE html>
<html>
<head>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
<link rel="import" href="foo.html">
<link rel="import" href="bar.html">
</head>
<body>
<div id='control-panel'>
<bar></bar>
</div>
<div id="content">
<foo></foo>
</div>
</body>
</html>我似乎找不到任何例子，说明如果我将bar按钮从foo元素中移出，如何使bar中的事件对foo是可见的。当bar不是foo的孩子时，听事件的最佳方式是什么？
回答 3
Stack Overflow用户
发布于 2014-05-30 13:25:25
聚合物是按照controllers的思想设计的。我的意思是，当A和B需要进行某种交互时，首选的体系结构是创建第三个实体C。C可以管理A和B的生命周期，并协调通信。这种结构的可维护性很好，因为C的用户不受A和B的影响，而A和B不受任何东西的影响。它还为A和B之间的阻抗匹配提供了一个方便的点。
<polymer-element name="my-c">
<template>
<my-a on-my-event="{{coolAction}}"></my-a>
...
<my-b id="b"></my-b>
</template>
<script>
Polymer({
coolAction: function() {
this.$.b.doCoolThing();
}
});
</script>
</polymer-element>新使用组件结构的用户通常认为这种设置不方便，但我的经验是，一旦您习惯了它，它就会非常有用。
最终，您的视图是一个组件图，其中任何特定的子图通常都可以被剪短、替换或以最小的压力重新连接。这对于构建灵活的应用程序是很好的。
signals概念存在于罕见的情况下，您确实希望A和B能够直接相互交谈，跨越组件图。这种能力在良好的应用程序设计中几乎是不需要的，如果可能的话应该避免。
Stack Overflow用户
发布于 2014-05-29 17:38:18
由于事件冒泡，处理这一问题的最简单方法是听取这两个元素的共同祖先。
假设您有这样的结构：
<div id="event-bus">
<my-a></my-a>
<my-b></my-b>
</div>然后<my-b>可以在#event-bus上监听我的事件.
要帮助`查找事件总线，可以设置一个属性：
<div id="event-bus">
<my-a></my-a>
<my-b event-bus="event-bus"></my-b>
</div>class MyB extends PolymerElement {
@published String eventBus;
ready() {
querySelector('#$eventBus').on['my-event'].listen((e){ react(); } );
}
...
}Stack Overflow用户
发布于 2014-05-29 23:52:43
https://stackoverflow.com/questions/23945085
复制相似问题
获取最遥远的祖先节点-Xpath，XSLT
来自XML节点的onclick事件
聚合物捕获来自子元素的所有事件
聚合物监听来自子轻量级DOM的事件
Dojo防止来自子节点的onclick事件
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
