Resetting and updating a list property in polymer 1.0.rc

Issue

I have a List of Map items property.

@property 
List<Map<String, dynamic>> items = [
    {'name': 'Acrid', 'checked': false},
    {'name': 'Fishy', 'checked': false}
  ]; 

that are displayed when an if condition evaluates to true.

<template
    restamp
    is = "dom-if"
    if = "[[normalChangedRestampedToggler]]">
  <div
      class = "layout horizontal wrap body auto"
      id = "container">

    <paper-material
        pad-bottom
        class = "dropdown-content layout vertical"
        elevation = "5">

      <paper-input
          value = "{{filterValue}}"
          label = "Search"
          class = "margin">
        <iron-icon
            suffix
            icon = "search"></iron-icon>
      </paper-input>

      <paper-menu multi
                  on-click = "onClickHandler">
        <template
            id = "repeat"
            is = "dom-repeat"
            items = "{{items}}"
            filter = "{{filter(filterValue)}}">
          <paper-item
              role = "menuitemcheckbox"
              toggles = "true"
              active = "{{item.checked}}">
            <paper-checkbox
                checked = "[[item.checked]]"
                checked-changed = "checkedChanged"></paper-checkbox>
            [[label(item)]]
          </paper-item>
        </template>
      </paper-menu>

    </paper-material>
  </div>
</template>

The conditional if is set by a paper-toggle button:

  @reflectable
  void toggleNormalChangedEvent( event, [_] ) {
    normalChangedRestampedToggler = !normalChangedRestampedToggler;
    set('normalChangedRestampedToggler', normalChangedRestampedToggler);

    switch ( normalChangedRestampedToggler ) {
      case false:
        for(var item in data)
        {
          item['checked'] = false;
        }
        set('items', data);
        data = new List<Map<String, dynamic>>( );
        break;
    }
  }

While the UI toggles as expected, the

set('items', data);

does not seem to reset the items – the old checked state of the checkboxes still remain. It appears that the items property does not update.

Can this update be forced by some means?

PS Could the problem be due to the fact that the checkboxes are in a nested-template? If so, is there a way to overcome this problem?

Thanks

Solution

This is redundant

normalChangedRestampedToggler = !normalChangedRestampedToggler;

because this includes the above (added !)

set('normalChangedRestampedToggler',! normalChangedRestampedToggler);

for(var item in data) {
  item['checked'] = false;
}

should be

for(int i = 0; i < items.length; i++) {
  set('items.$i.checked', false);
}

data = new List<Map<String, dynamic>>( );

doesn’t do anything because you probably assign the same list again and Polymer recognizes that there is no change.

Also template is="dom-repeat uses

items = "{{items}}"

why do you set data?

Answered By – Günter Zöchbauer

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.