使用 Polymer-Dart 和 Dart 对象进行数据绑定

Question

我有一个名为 MyClass 的自定义 class。我的自定义元素中有一个 List<MyClass> testList，我想使用数据绑定来显示列表的内容。

我的班级：

class MyClass {

  String name;

  MyClass(String name) {
    this.name = name;
  }

}

custom_element.dart:

  ...

  attached() {
    super.attached();
    var lst = new List<MyClass>();
    lst.add(new MyClass('test'));
    set('testList', lst);
  }

  ...

custom_element.html:

  ...

  <template is="dom-repeat" items="{{testList}}">
      <span>{{item}}</span>
      <span>{{item.name}}</span>
  </template>

  ...

然而，输出是：

  <span>[object DartObject]<span>
  <span><span>
  <span>[object DartObject]<span>
  <span><span>

为什么不显示对象的名称？如何访问属性名称？ item.name 和 item['name'] 都不起作用......它曾经在 Polymer 0.5 和相应的 Polymer-Dart 版本上工作。 :(

Answer 1

这有点令人困惑，因为还没有新聚合物版本的文档，但您（应该）需要做的就是让您的 class 扩展 JsProxy class.如果您在 behaviors 分支上，您还需要用 @jsProxyReflectable 注释 class。例如：

// @jsProxyReflectable // only if you are on the `behaviors` branch
class MyClass extends JsProxy {
  @reflectable // from >= 1.0.0-rc.2
  String name;

  MyClass(String name) {
    this.name = name;
  }
}

使用 Polymer-Dart 和 Dart 对象进行数据绑定

Databinding using Polymer-Dart and Dart objects

dart

polymer

dart-polymer