Dart: cannot bind template variables to the model's properties

[DartBot]

Issue by Emasoft Originally opened as dart-lang/sdk#16084

---

I've made a simple pizza class model. To bind the class to the polymer dart element I taked the approach of making the various properties in the Pizza class @­observable:

class Pizza {   @­observable List<String> firstHalfToppings = toObservable([]);   // ... }

I listen to the model's attribute:

@CustomTag('x-pizza') class XPizza extends PolymerElement {   // ...   @­published Pizza model;   XPizza.created(): super.created() {     model.firstHalfToppings.changes.listen((records) {       pizzaState = model.toString();       print('changed: $records');       print(model.toString());     });   }   // ... }

The problem is that listening to the model itself is not sufficient as it does not see changes from its own properties. Frustratingly, I cannot bind template variables to the model's properties:

<polymer-element name="x-pizza">   <template>     <h2>Build Your Pizza</h2>     <pre> {{model.firstHalfToppings}} {{model.secondHalfToppings}}</pre>   </template>   <script type="application/dart" src="x_pizza.dart"></script> </polymer-element>

They show the initial value of an empty list, but never update!

I think that this is a bug that must be corrected.

[DartBot]

Comment by iposva-google

---

Added Area-Polymer, Triaged labels.

[DartBot]

Comment by zoechi

---

Your Pizza class should be

class Pizza extends Object with Observable{   @­observable List<String> firstHalfToppings = toObservable([]);   // ... }

[DartBot]

Comment by Emasoft

---

This should be made clearer in the Observable documentation then. Assign this to dart docs.

[DartBot]

Comment by sigmundch

---

Removed Area-Polymer label. Added Area-Documentation, Docs-Articles labels.

[DartBot]

Comment by kwalrath

---

Is this a problem in the article or the API docs? (or both)

---

cc @sigmundch. Set owner to @sethladd. Added Library-Polymer label.

[DartBot]

Comment by sethladd

---

We should either rewrite the observable docs or delete it. It was written back in Web UI days.

---

Removed the owner.

[DartBot]

Comment by jmesserly

---

Removed Area-Documentation label. Added area-pkg, Pkg-Polymer labels.

[DartBot]

Comment by jmesserly

---

Removed Library-Polymer label.

[DartBot]

Comment by sigmundch

---

The documentation should hopefully be more clear now in the observable class:

https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/observe/observe#id_observable

I'm also sending a patch to update the docs on @­observable: https://codereview.chromium.org/368793002/

---

Added this to the Later milestone. Removed Priority-Unassigned, Docs-Articles, Pkg-Polymer labels. Added Priority-Low, Pkg-Observe, Accepted labels.

[DartBot]

Comment by sigmundch

---

Added Fixed label.