How to do simple data binding with dom-repeat in Dart+polymer 1.0?

Issue

My brain hurts. (And sorry, I don’t know js).

For my simple example/learning curve, in my HTML file I have:

<template is="dom-repeat" items="{{datalist}}" as="item">
  {{item}}<br>
</template>

and in the Dart file:

@reflectable
List<String> datalist = new List();

void rebuildDatas() {
  datalist.clear();
  datalist.add('hello');
}

which does not show ‘hello’. But if I define:

@reflectable
List<String> data= ['one','two'];

‘one’ and ‘two’ are listed successfully.

How do I do a dynamic update of data please?

(rebuildDatas() is called of course!)

Thanks

Steve

Solution

The version of Polymer you are using doesn’t support compound bindings.
This changed in Polymer 1.2 (JS) or Polymer Dart 1.0.0-rc.5.

The best action is to upgrade; an interim workaround would be to change this binding to span the whole text content of a tag:

<template is="dom-repeat" items="{{datalist}}" as="item">
  <span>{{item}}<span><br>
  <!-- or   <div>{{item}}<div> -->
</template>

You need to use Polymer API to update property values in order for Polymer to recognize the change and update bound values:

@property
List<String> datalist = new List();

void rebuildDatas() {
  clear('datalist');
  add('datalist', 'hello');
}

See also Dart Polymer 1.0 – Two-way binding works?

Answered By – Günter Zöchbauer

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.