on-change event not firing properly when binding value

Question

I have this html code:

<textarea id="text-to-convert" on-change="change" value="{{text}}"></textarea>

And this dart code:

import "dart:html";
import 'package:polymer/polymer.dart';

@CustomTag('dictionary-converter')
class DictionaryConverter extends PolymerElement with ObservableMixin {

  @observable String text = "Initial text";

  void change(Event event, var detail, TextAreaElement textElement) {
    print(textElement.value);
    print(text);
  }

}

In this case, the on-change event is only triggered from time to time. (I haven't yet figured out when exactly).

When I remove the value={{text}} binding, the event is properly fired every time the textare is changed.

Am I overlooking something or is this a bug?

Answer 1

With Polymer 0.8+ you can use *yourFieldName**Changed. When the observed property changes, the Changed method will be called. Since String text is two way data bound, changing the value of the textarea will change the value of String text and call the textChanged method. This works with your original code and doesn't need ObservableBox

import "dart:html";
import 'package:polymer/polymer.dart';

@CustomTag('dictionary-converter')
class DictionaryConverter extends PolymerElement with ObservableMixin {

  @observable String text = "Initial text";

  textChanged(oldValue) {
    print("textarea: ${this.shadowRoot.query("textarea").value}");
    print("text: ${text}");
  }
}

Answer 2

Apparently I have to use an ObservableBox as described in this stackoverflow question

So I ended up with:

import "package:polymer/polymer.dart";
import "package:observe/observe.dart";

@CustomTag('dictionary-converter')
class DictionaryConverter extends PolymerElement with ObservableMixin {

  ObservableBox csvText = new ObservableBox("Initial text");

  ready() {
    csvText.changes.listen(convert);
  }

  void convert(x) {
    String text = csvText.value;
  }

}