CODEWITHSUNDEEP
dartpolymerdart-polymer
mikedal
mikedal

Reputation: 286

Using an ObservableList to update a template in Dart

I am trying to bind an ObservableList to a template, and I am a bit confused about how it is working. In the following example, when I click the button, the instance of the list that is displayed by iterating through the elements is updated, but the instance that is used directly is not.

dart:

@CustomTag('my-observing-list')
class ObservingList extends PolymerElement {

  ObservingList.created() : super.created();

  @observable ObservableList theList = new ObservableList.from([0, 1, 2, 3, 4]);

  addElement(var x) {
    theList.add(5);
  }
}

html:

<polymer-element name="my-observing-list">
    <template>
        <template repeat="{{l in theList}}">
            {{l}}
        </template>
        {{theList}}
        <button on-click="{{addElement}}"></button>
    </template>
</polymer-element>

Further adding to my confusion, if I add an observable integer to my element, include it in the template, and update it when the button is clicked, it causes both instances of the list to be updated when the button is clicked.

dart:

class ObservingList extends PolymerElement {

  ObservingList.created() : super.created();

  @observable ObservableList theList = new ObservableList.from([0, 1, 2, 3, 4]);
  @observable var number = 0;

  addElement(var x) {
    theList.add(5);
    number = 1;
  }
}

html:

<polymer-element name="my-observing-list">
    <template>
        <template repeat="{{l in theList}}">
            {{l}}
        </template>
        {{theList}}
        {{number}}
        <button on-click="{{addElement}}"></button>
    </template>
</polymer-element>

Can someone explain what's happening here?

Upvotes: 1

Views: 192

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658253

It's a while I used Polymer 0.16 ... 

{{theList}}

is basically 

{{theList.toString()}}

and the returned string is not an observable. Also the reference to theList doesn't change when you add a value to the observable list. I remember there was a workaround to make Polymer recognize the change but don't remember what it was (transformer or something).

The number is observed directly and when it changes it is recognized by Polymer.

Upvotes: 1

Related Questions