Dart: Using observable with multiple getter/setter(s)

Question

for my Polymer application I need one observable in two different flavors, for example as an integer-value and and string-value. I use getters and setters to encapsulate the

Answer 1

In case the count property doesn't need to be private — something to consider according to the Dart style guide — a sweet option would be available for this kind of situation.

class ClickCounter extends PolymerElement {
    @observable int count;
    ...
    void countChanged(oldValue) {
        // do something...
    }
}

Changes occurred to observable properties is automatically passed on method named as <property_name>Changed where property_name refers to the property to spy on.

Hope this help bring more fun to writing Polymer components.

Answer 2

I have not tested it, but it should work and I think its notable less code if you have more such properties.

@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  int _count;
  @observable int get count => _count;
  set count(int val) { 
    notifyPropertyChange(#count,_count,val);
    notifyPropertyChange(#strcount, _count.toString(), val.toString());
    _count = val;

  @observable String get strcount { 
    // print("TOSTRING "+_count.toString()); 
    return _count.toString();}

  set strcount(String val) { 
    count = int.parse(val); // set the new value using the setter not the field to fire property change
  }

  ClickCounter.created() : super.created();

  void increment() {
    count++;
  }
}

Answer 3

Not sure if this applies to you but I had the same problem. In my case though I could solve it with just the one property and a filter.

dart class

int count;

int asInt(...) // can't remember details of filters

html

<input type="text">{{count | asInt}}<input>

Apologies for the incorrectness of the code. I'm on my phone and don't have time to search the code. Hopefully you get the idea

Cheers Anders