Dart Polymer element with published property: how to avoid self-notification

Question

I've a custom Polymer element with a published property inputValue.

The component listen for inputValue changes, and when it changes report the new value to an internal logic.

The same is done in the opposite direction: the element listen for internal logic changes and set the new value to the inputValue.

When the new value is set to inputValue this make the observe system notify all the listeners, but the element is itself a listener.

I want to avoid that the element is notified about changes made by itself.

Here the custom element Dart code:

@CustomTag("codemirror-input")
class CodemirrorInput extends PolymerElement {

  @published
  String mode;

  @published
  String inputValue;

  CodemirrorInput.created() : super.created();

  void ready() {

    Map options = {
      'mode':  mode
    };

    GradeCodeMirror editor = new GradeCodeMirror.fromElement(
        $['codemirror'], options: options);

    onPropertyChange(this, #inputValue, (){
      editor.setOption("value", inputValue);
    });

    editor.onChange.listen((_){
      inputValue = editor.getDoc().getValue();
    });
  }
}

It is still hard to grasp for me what is going on here. Can't you just update the value from your code and let Polymer resolve the updating? What makes editor.onChange.listen fire? — Günter Zöchbauer
Codemirror is an external library that wraps a DIV and make it a source code editor providing syntax highlight. I'm using a porting to Dart of that JS library. The editor.onChange.listen is fired by the codemirror editor when the user modify the code in the source code editor. — Fedy2
I'm using the value property (now fixed and rename inputValue) as bridge for external data-binding. — Fedy2

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-10-29T15:54:06

I wonder why inputValueChanged fires at all if the value didn't actually change, I thought it fires only when the old value and new value differ. But if it really doesn't work this way you can check this yourself

editor.onChange.listen((_){
  var val = editor.getDoc().getValue();
  if(inputValue != val) {
    inputValue = val;
  }
});

onPropertyChange(this, #inputValue, (){
  editor.setOption("value", inputValue);
});

can be simplified by adding a method to the element

void inputValueChanged(oldValue, newValue) {
  editor.setOption("value", inputValue);
}

This method is called every time inputValue changes.

Dart Polymer element with published property: how to avoid self-notification

1 Answers