Make Dart-Polymer model class reflectable without JsProxy

Issue

I have a dart server running on AppEngine and a Dart-Polymer client. The idea was to share common logic, such as the models. However, there is a little problem. Usually you would make your model-Classes extend JsProxy and than annotate all relative fields with @reflectable in order to use them in data binding. Unfortunately the model which works with AppEngine’s datastore already inherits from Model. Besides that, I am not sure whether dart:js is available on the server. Hence, I have to find another way to make my model reflectable for the UI.

Annotating Project#name with @reflectable didn’t work. Same empty div as output.

When including JsProxy in the model:

The built-in library ‘dart:html’ is not available on the stand-alone
VM.

Any ideas?

@Kind(name: 'Project', idType: IdType.Integer)
class Project extends Model {

  @StringProperty(required: true)
  String name;

}

@PolymerRegister('project-list')
class ProjectList extends PolymerElement {

  @property List<Project> projects;

  ProjectList.created() : super.created();

  ready() {
    fetchProjects();
  }
}

<dom-module id="projects-page">
  <template>
    <template is="dom-repeat" items="{{projects}}">
      <div>{{item.name}}</div>
    </template>
  </template>
</dom-module>

Output:

<div></div>

Solution

This is a known issue https://github.com/dart-lang/polymer-dart/issues/664

The best workaround so far is to use proxy objects where the annotations are applied and that wrap the shared model classes.

class FooProxy extends JsProxy implements Foo {
  final Foo model;

  FooProxy(this.model);

  @reflectable
  int get bar => model.bar;
  set(int value) { model.bar = value}
}

Answered By – Günter Zöchbauer

Answer Checked By – Mary Flores (FlutterFixes Volunteer)