ObservableList not updated in template

[DartBot]

Originally opened as dart-lang/sdk#21568

This issue was originally filed by [email protected]

---

What steps will reproduce the problem?

1. create a custom element with an ObservableList field (mylist)
2. put the list in the element template ({{mylist}})
3. add a new element to the list

What is the expected output? What do you see instead?
I should see the list updated (["new element"]), instead the list is not updated ("[]").

What version of the product are you using?
Dart 1.7.2, polymer-expression 0.13.0

Please provide any additional information below.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/405837?v=3" align="left" width="48" height="48"hspace="10"> Comment by zoechi

---

I encountered this very recently with a Map.
When you have a field

@observable
List myList = [];
// or even
// List myList = toObservable([]);

and add it to the template of your Polymer element like

{{myList}}

Id doesn't get updated when you add/remove/modify items in the List.
This is mostly because myList hasn't changed and this is what {{myList}} refers to.
myList still refers the same list.

{{myList}} implicitely uses toString() but it seems toString() is not observed for changes.
{{myList.toString()}} doesn't change this (at least this was the case for my Map example).

If you do something like

void addItem(Event e) {
  myList.add('xxx');
  var tmp = myList;
  myList = null;
  new Future(() => myList = tmp);
}

then the view is updated.

Using a filter didn't help either

String asString(List val) {
 return val.toString()
}

{{myList | asString}}

What should work is

String _oldMyListString;
@observable
String get myListString => myList.toString();

myList.changes.listen((recs) {
  _oldMyListString = notifyPropertyChange(#myListString, _oldMyListString, myListString);
});

{{myListString}}

caution: code not tested

Maybe someone from the Dart team knows a better workaround...

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2156198?v=3" align="left" width="48" height="48"hspace="10"> Comment by kasperl

---

Added Area-Pkg, Pkg-Observe, Triaged labels.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/984921?v=3" align="left" width="48" height="48"hspace="10"> Comment by jakemac53

---

This has caused a lot of confusion and come up a few times, I might spend a bit of time today seeing if I can get it working correctly. This is really only useful as a debugging feature but I think that even if its just for that its worth getting right.