远端节点的聚合物事件 [英] Polymer events from distant nodes
问题描述
我想要熟悉聚合物，并且一直在努力使用它构建一个示例应用程序。按照 https://www.dartlang.org/docs/tutorials/polymer-intro上的教程并阅读其他StackOverflow问题，例如如何我从Polymer Dart中触发了一个自定义事件？我已经设法构建两个元素，其中一个元素触发一个事件，由第二个元素执行。但是，我已经能够找出如何做到这一点的情况下，发射元素是听音元素的孩子。例如，如下
foo.html
< link rel =importhref =bar.html>
< polymer-element name =foo>
< template>
< my-bar on-myevent ={{react}}>< / mybar>
< / template>
< script type =application / dartsrc =foo.dart>< / script>
< / polymer-element>
foo.dart
$ b b Foo extends PolymerElement {
Foo（）{
}
Foo.created（）：super.created（）;
void react（）{
print（事件发生了，听说过！
}
}
bar.html / p>
< polymer-element name =bar>
< template>
< button on-click ={{click}}>< / button>
< / template>
< script type =application / dartsrc =bar.dart>< / script>
< / polymer-element>
bar.dart
$ b b
类Bar扩展PolymerElement {
Bar（）{
} }
Bar.created（）：super.created（）;
void click（Event e，var details，Node node）{
print（Triggering event）;
fire（'my-event'）;
}
}
index.html / p>
<！DOCTYPE html&
< html>
< head>
< script type =application / dartsrc =main.dart>< / script>
< script src =packages / browser / dart.js>< / script>
< link rel =importhref =foo.html>
< / head>
< body>
< div id =content>
< foo>< / foo>
< / div>
< / body>
< / html>
我想做的是能够移动 / code>按钮外面的 foo 元素，如在我想要设计的应用程序，我想输入控件存在是一个单独的区域的页面从主输出显示（ foo 元素）。基本上，我想能够使 foo.html 和 index.html 看起来像这样：
foo.html
< polymer-element name =foo>
< template>
<！ - Databound output stuff here - >
< / template>
< script type =application / dartsrc =foo.dart>< / script>
< / polymer-element>
index.html
<！DOCTYPE html>
< html>
< head>
< script type =application / dartsrc =main.dart>< / script>
< script src =packages / browser / dart.js>< / script>
< link rel =importhref =foo.html>
< link rel =importhref =bar.html>
< / head>
< body>
< div id ='control-panel'>
< bar>< / bar>
< / div>
< div id =content>
< foo>< / foo>
< / div>
< / body>
< / html>
我似乎找不到任何例子，如果我移动 bar 按钮从 foo 元素中取出可见到 foo 。当 foo 不是 bar 的子节点时，最好的方法是从 p>
Polymer是围绕 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>
新的组件结构的用户经常认为这种设置不方便，但我的经验是，它是非常
最终，你的视图是一个组件图，其中任何特定的子图通常可以被剪切，替换或重新附加最小应力。这对于构建灵活的应用程序非常有用。
信号概念存在于罕见的场合， B直接互相交谈，跨越组件图。这种能力几乎不需要良好的应用程序设计，并应尽可能避免。
I'm trying to get familiar with polymer, and have been working my way through trying to build a sample application with it. Following the tutorials at https://www.dartlang.org/docs/tutorials/polymer-intro and reading other StackOverflow questions such as How do I fire a custom event from Polymer Dart? I have managed to build two elements where one element fires an event that is acted upon by the second element. I have, however, only been able to figure out how to do this for cases where the firing element is a child of the listening element. For example, as follows
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>
What I'd like to do is be able to move the bar button outside of the foo element, as in the app that I want to design, I would like the input controls to exist is a separate area of the page from the primary output display (the foo element). Basically, I'd like to be able to make foo.html and index.html look like this:
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>
I can't seem to find any examples on how, if I move the bar button out of the foo element, to get the event from bar to be visible to foo. What would be the best way to listen to the event from bar when it is not a child of foo?
Polymer is designed around the idea of controllers. By this I mean, when A and B need to have some interaction, the preferred architecture is to create a third entity C. C can manage the lifecycle of A and B, and orchestrate communication. This kind of structure is excellent for maintainability, because users of C are insulated from the particulars of A and B, and A and B are insulated from everything. It also provides a convenient spot for impedance matching between A and 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>
Users new to component structures often perceive this set-up as inconvenient, but my experience is that it's extraordinarily helpful once you get used to it.
Ultimately your view is a graph of components, where any particular sub-graph can generally be snipped off, replaced, or reattached with a minimum of stress. This is great for building flexible applications.
The signals concept exists for the rare occasion where you really want A and B to talk to each other directly, cutting across the component graph. This ability is almost never needed with a good application design, and should be avoided if possible.
这篇关于远端节点的聚合物事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
