我正在构建一组聚合物组件，从更简单的通用组件(例如 Canvas 周围的简单包装器)到更高级别的组件(例如使用简单 Canvas 包装器进行特定类型绘图的东西)开始。
一旦我达到大约 3 层深度，我就无法弄清楚如何填充更简单组件的聚合物元素属性。对我来说主要的问题是 child 的属性通常来自更高级别组件的属性。
例如，从一个简单的低级组件开始，它只有一个属性“消息”
foo.html
<!DOCTYPE html>
<polymer-element name="foo-view" >
<template>
<p>
message: '{{message}}'
</p>
</template>
<script type="application/dart" src="foo.dart"></script>
</polymer-element>
Dart
library foo;
import 'package:polymer/polymer.dart';
@CustomTag('foo-view')
class FooViewElement extends PolymerElement {
@published String message;
FooViewElement.created() : super.created();
}
然后是一个更高级别的组件，它使用 foo 并根据它自己的属性“bar”派生 foo 的消息属性
bar.html
<!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>
条形 Dart
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 的消息属性中，并且显示的值应该是“这就是我期望在 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'我不确定我是否弄错了；或者聚合物中有 bug ；或者我完全错了。
最佳答案
当您扩展元素类时，您还必须设置
extends HTML 标记 ( bar.html ) 中的属性。但在这种情况下，您不会嵌入基本元素(
foo-view )。见 extend_custom_element from Polymer examples
@published 时效果更好。 HTML 中的属性 <polymer-element name="foo-view" attributes="message"> (这不应该是必要的，所以这可能会在此期间修复)<shadow></shadow>标记到派生元素。这是插入构成基本元素的元素的地方。 我建议你试试这个，如果你仍然没有得到它的工作，更新问题，以便它显示你已经走了多远，我们/我再看一次。
关于dart - 通过表达式填充 Polymer 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21494887/