gpt4 book ai didi

dart - 来自远程节点的 polymer 事件

转载 作者:行者123 更新时间:2023-12-01 00:25:13 25 4
gpt4 key购买 nike

我正在努力熟悉 polymer ,并且一直在努力尝试使用它构建示例应用程序。按照 https://www.dartlang.org/docs/tutorials/polymer-intro 中的教程进行操作并阅读其他 StackOverflow 问题,例如 How do I fire a custom event from Polymer 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.htmlindex.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的 child 时?

最佳答案

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>

不熟悉组件结构的用户通常认为这种设置不方便,但我的经验是,一旦您习惯了它,它就会非常有用。

最终,您的 View 是一个组件图,其中任何特定的子图通常都可以以最小的压力被剪掉、替换或重新附加。这对于构建灵活的应用程序非常有用。
signals这个概念存在于极少数情况下,您真的希望 A 和 B 直接相互交谈,跨越组件图。良好的应用程序设计几乎不需要这种能力,如果可能的话应该避免。

关于dart - 来自远程节点的 polymer 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23945085/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com