CODEWITHSUNDEEP
javascriptpolymer
NicholasByDesign
NicholasByDesign

Reputation: 801

dom-repeat not reflecting data changes

I tried computed properties and various other techniques, but the view is not reflecting my model. The model updates, but the view does not.

View

<div class="selection">
  <ul>
   <template is="dom-repeat" items="{{state.selection}}">
    <li>
     <a data-selection$="{{item.id}}" on-click="selection">{{item.name}}</a>
    </li>
   </template>
  </ul>
</div>

<div class="selection sub-selection">
 <template is="dom-repeat" items="{{state.subSelection}}">
  <ul id$="subselection-{{item.id}}" class$="[[item.active]]">
   <template is="dom-repeat" items="{{item.selections}}">
      <li>
       <a data-selection="{{item.id}}" on-click="selection">{{item.name}}</a>
      </li>
   </template>
  </ul>
 </template>
</div>

Model

constructor(){
   super()
   this.state = {
       selection: [
          {
            id: 1,
            name: 'Selection One'
           },
           {
            id: 2,
            name: 'Selection Two'
           }
        ],

    subSelection: [
          {
            id: 1,
            name: 'Sub Selection One',
            active: 'active'
           },
           {
            id: 2,
            name: 'Sub Selection Two',
            active: ''
           }
        ]
  }

  selection(event){
    event.preventDefault();
    let self = this;
    let id = parseInt(event.currentTarget.getAttribute('data-selection'));

    self.state.subSelection.forEach(function(key, index){
     if(key.id === id){
       key.active = 'active'
     }else{
       key.active = ''
     }
    });
}

The goal would be to click a item in "selection" get its id value and match it to and item in "subSelection" with the same id then changing the active value to "active" or "".

All goes well except the view updating.

Upvotes: 1

Views: 47

Answers (1)

NicholasByDesign
NicholasByDesign

Reputation: 801

So I ended up solving it by this.set(property, value). Polymer is very particular in how this should be achieved as well. But the following worked in my update function:

selection(event){
   event.preventDefault();
   let self = this;
   let id = parseInt(event.currentTarget.getAttribute('data-selection'));      
   self.state.subSelection.forEach(function(key, index){
       if(key.id === id){
         self.set("state.subSelection."+index+".active", 'active');
       }else{
         self.set("state.subSelection."+index+".active", '');
       }
   );
 }

Upvotes: 1

Related Questions