您混合封装和继承。扩展元素类时，还必须在HTML标记（
extends）中设置bar.html属性。但是在这种情况下，您不会嵌入基础元素（foo-view）。参见extend_custom_element from Polymer examples
我正在建立一组聚合物组件，从更简单的通用组件（例如，围绕画布的简单包装器开始，到更高级别的组件（例如，将简单的画布包装器用于特定类型的绘图的东西）。） >
一旦深入到3深度，我将无法弄清楚如何填充较简单组件的聚合物元素属性。对我来说，主要的收获是孩子的属性通常是从较高级别的组件的属性派生的。
例如，从一个仅具有单个属性'message'的简单低级组件开始
<!DOCTYPE html>
<polymer-element name="foo-view" >
<template>
<p>
message: '{{message}}'
</p>
</template>
<script type="application/dart" src="foo.dart"></script>
</polymer-element>
library foo;
import 'package:polymer/polymer.dart';
@CustomTag('foo-view')
class FooViewElement extends PolymerElement {
@published String message;
FooViewElement.created() : super.created();
}
然后是使用foo并根据其自身的属性'bar'派生foo的message属性的更高级别的组件
<!DOCTYPE html>
<link rel="import" href="foo.html">
<polymer-element name="bar-view" >
<template>
<foo-view message="{{message}}" ></foo-view>
</template>
<script type="application/dart" src="bar.dart">
</script>
</polymer-element>
library bar;
import 'package:polymer/polymer.dart';
@CustomTag('bar-view')
class BarViewElement extends PolymerElement with ChangeNotifier {
String _bar;
@published String get bar {
return _bar;
}
@published void set bar(String b) {
_bar = b;
if (b != null) {
// derive the message property here
message = "this is what I expect to end up in foo.message";
}
}
@observable String message = "initial message";
BarViewElement.created() : super.created();
}
因此，我的期望（意图）是，当设置bar属性时，它将计算应该显示的消息并设置该属性。反过来，我希望它将传播到foo的message属性中，并且显示的值应该是“这是我期望以foo.message结尾的内容”。
显然，这是一个愚蠢的示例，因为我并没有真正派生出消息字段，但是在我的实际用例中，我此时正在基于传递给更高级别组件的对象构造和对象。 > 为了测试它，我创建了一个示例组件example_ui.html
<!DOCTYPE html> <link rel="import" href="packages/polymerIssue1/bar.html"> <polymer-element name="example-ui" > <template> <bar-view bar="{{bar}}"></bar-view> </template> <script src="example_ui.dart" type="application/dart"></script> </polymer-element>example_ui.dart
library ui; import 'package:polymer/polymer.dart'; @CustomTag('example-ui') class ExampleUi extends PolymerElement { // Note in my real world example this constructs a complex object @observable String bar = 'this is the value of bar'; ExampleUi.created() : super.created(); }然后是测试页
<!DOCTYPE html> <html> <head> <link rel="import" href="example_ui.html"> <script type="application/dart">export 'package:polymer/init.dart';</script> <script src="packages/browser/dart.js"></script> </head> <body> <div> <h3>example-ui</h3> <example-ui></example-ui> </div> </body> </html>显示
message: 'initial message'而不是message: 'this is what I expect to end up in foo.message'
我不确定是否做错了；或聚合物中有错误；否则我将完全错了。
我正在建立一组聚合物组件，从更简单的通用组件（例如，画布周围的简单包装纸）到更高级别的组件（例如，使用简单...的东西开始]]
您混合封装和继承。扩展元素类时，还必须在HTML标记（extends）中设置bar.html属性。但是在这种情况下，您不会嵌入基础元素（foo-view）。参见extend_custom_element from Polymer examples
如果扩展Polymer元素，则应在派生元素上添加@published标签。这是构成基本元素的元素插入的地方。
您混合封装和继承。扩展元素类时，还必须在HTML标记（extends）中设置bar.html属性。但是在这种情况下，您不会嵌入基础元素（foo-view）。参见extend_custom_element from Polymer examples