Databinding using Polymer-Dart and Dart objects

Question

I have a custom class called MyClass. I have a List<MyClass> testList in my custom element and want to use databinding for displaying the List's content.

MyClass:

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>

  ...

However, the output is:

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

Why doesn't it show the object's name? How can I access the property name? Neither item.name nor item['name'] work... It used to work on Polymer 0.5 and the corresponding Polymer-Dart version. :(

Jake MacDonald Jake MacDonald · Accepted Answer · 2015-09-02T17:01:22

This is a bit confusing as there is no documentation out yet for the new polymer version, but all you (should) need to do is make your class extend the JsProxy class. If you are on the behaviors branch you will also need to annotate the class with @jsProxyReflectable. For instance:

// @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;
  }
}

Databinding using Polymer-Dart and Dart objects

1 Answers