Question

我正在构建一组聚合物组件，从更简单的更通用的组件（例如围绕画布的简单包装器）开始到更高级别的组件（例如，对于特定类型的绘图使用简单的画布包装器的东西）。

一旦达到3深，我就无法弄清楚如何填充更简单组件的聚合物元素属性。对我来说，主要的问题是儿童的属性通常来自较高级别组件的属性。

例如从一个简单的低级组件开始，该组件只有一个属性'message'

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>

foo.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>

bar.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的message属性中，显示的值应该是'这是我期望在foo.message中结束的'。

显然这是一个愚蠢的例子，因为我并没有真正推导出消息字段，但在我的真实世界中，我正在构建和使用基于传入更高级别组件的对象。 / em>的

为了测试它，我创建了一个示例组件

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'

我不确定我是否错了;或者聚合物有缺陷;或者我完全错了。

有人有什么建议吗？

Answer 1

您混合封装和继承。扩展元素类时，还必须在HTML标记（extends）中设置bar.html属性。
但在这种情况下，你不能嵌入基本元素（foo-view）见extend_custom_element from Polymer examples
我最后一次使用扩展自定义元素时，当我在HTML @published中声明<polymer-element name="foo-view" attributes="message">属性时，它更有效（这不应该是必要的，所以这可能是在此期间修复）
如果扩展Polymer元素，则应在派生元素中添加<shadow></shadow>标记。这是插入元素形成基本元素的地方。

我建议您尝试这一点，如果您仍然无法使其正常工作，请更新问题，以便显示您已走了多远，我们/我再看看。

通过表达式填充Polymer属性

foo.html

foo.dart

一个bar.html

bar.dart

example_ui.html

example_ui.dart

1 个答案: