using a computed property in a template dom repeat seems to not actually get data

Issue

The use case I have been working with is that i have some markup as follows.

<my-radiolist value="{{myValue}}">
  <template is="dom-repeat" items="{{test}}">
    <my-radiobutton value="{{item}}" label="{{item}}"></my-radiobutton>
  </template>
</my-radiolist>

and when test is defined as:

@property List<int> test = [1,2,3];

it works just fine.

Now, I wanted to populate this list by looping over a more complicated object. I wanted to make it computed, and then execute the given function. I update the sample as follows:

@Property(computed:"getTest()")
List<Map> test = null;

@reflectable
List<Map> getTest() {
  print("Inside my getTest Function");
  return [{"key": "test", "value": "test"}, {"key":"test 2","value":"test 2"}];
}

I noticed that my print statement has never fired, so my property has my default value which means there is nothing to iterate over.

I have done these before, but not for template repeaters. Is there something I am doing wrong?

My thought is that since computed updates when an argument is updated, and since i am not using any arguments, using a computed property in this case is not the course of action I should take.

Solution

The value is interpreted as a method name and argument list. The method is invoked to calculate the value whenever any of the argument values changes. Computed properties should never be written to directly. See Computed properties for more information.

When there are no parameters, then in my opinion a computed property doesn’t make sense here anyway.

See also https://github.com/dart-lang/polymer-dart/wiki/properties#computed-properties

Answered By – Günter Zöchbauer

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *