Robert Hahn Robert Hahn - 2 months ago 35
Dart Question

Make Dart-Polymer model class reflectable without JsProxy

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>

Answer

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}
}