Mic*_*ick 3 dart polymer dart-polymer
我正在努力熟悉聚合物,并一直在尝试用它构建一个示例应用程序.按照https://www.dartlang.org/docs/tutorials/polymer-intro上的教程并阅读其他StackOverflow问题,例如如何从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.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什么？
聚合物是围绕着这个想法而设计的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直接相互交谈,切入组件图的罕见场合.良好的应用程序设计几乎不需要这种能力,应尽可能避免使用.
| 归档时间： |
|
| 查看次数： |
915 次 |
| 最近记录： |