Computed property in dom-repeat doesn't work - polymer

Question

I try to use computed property in dom-repeat helper but it throws exception immediately after I click button (see code below, packages versions: sdk: 0.12.2, polymer: 1.0.0-rc.5, polymer_interop: 1.0.0-rc.4+1). What might be wrong? When I replace {{computedItems}} with {{items}} everything works fine.
class Item extends JsProxy{
#reflectable
String a="aaa aaa";
#reflectable
String b="bbb bbb";
Item(this.a, this.b);
}
#PolymerRegister('main-app')
class MainApp extends PolymerElement {
#Property(computed:"getItems(items.*)")
List<Item> computedItems;
#property
List<Item> items = [];
#property
String inp = '';
MainApp.created() : super.created();
#reflectable
List<Item> getItems(_) {
return items;
}
#reflectable
void onTap(Event ev, Map details) {
add("items", new Item(inp, 'aa'));
set("inp", "");
}
}
and html file:
<dom-module id="main-app">
<template>
<paper-input value="{{inp}}"> </paper-input>
<paper-button raised on-tap="onTap">add to list</paper-button>
<template is="dom-repeat" items="{{computedItems}}">
<div style="color:red">
<span>[[item.a]]</span>
<span>[[item.b]]</span>
</div>
</template>
</template>
</dom-module>

Answer 1

You could do it this way:
#PolymerRegister('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created();
#property
List<Item> computedItems;
#property
List<Item> items = [];
#Observe('items.*')
void computeItems([_, __]) {
set('computedItems', items.toList());
// .toList() creates a copy, otherwise Polymer wouldn't
// recognize it as a change
// this works as well
// set('computedItems', null);
// set('computedItems', items);
}
#property int itemsChangeIndicator = 0;
#property
String inp = '';
#reflectable
List<Item> getItems(_) {
return items;
}
#reflectable
void tapHandler(dom.Event ev, Map details) {
add("items", new Item(inp, 'aa'));
set("inp", "");
}
}
(I renamed onTap because this naming scheme easily collided with event stream getters in the element, like onClick)