Component property not updated on URL change?

Learning Team
1

Hi,

i have two components in my template:

{{ property-pie-chart 
    models=model.hosts
    defaultProp=""
    filterByDate=filterByDate
    chartData=[]    
}}

   {{ paged-filtered-list 
       data=model.hosts
       dates=model.dates 
       page=page 
       pageSize=pageSize
       filterByDate=filterByDate
       pagerView=pagerView
       initRouteAction=( action 'dateInit' )
       dateFilterAction=( action 'filterByDate' )
       termFilterAction=(action 'filterByTerm')    
       sortOrder=sortOrder
       sortField=sortField
    }}

I send action from paged-filtered-list component to controller, which triggers route transition with filterByDate as parameter:

import Ember from 'ember';

export default Ember.Controller.extend({
    queryParams: [
        'page',
        'pageSize',
        'sortField',
        'sortOrder',
        'filterByDate',
        'filterByTerm'
    ],
    filterByDate: "",
    filterByTerm: "",
    page: 1,
    pageSize: 10,
    pagerView: 4,
    sortField: "",
    sortOrder: 'asc',
    lala: "",
    actions: {
        dateInit: function(sortedDates) {
            if (!this.get('filterByDate')) {
                let params = {
                    filterByDate: sortedDates.get('firstObject').get('key'),
                    page: this.get('page'),
                    pageSize: this.get('pageSize'),
                    pagerView: this.get('pagerView')
                };

                this.transitionToRoute('hosts', { queryParams: params});
            }
        },
        filterByDate: function(value) {
            if (value) {
                let params = {
                    filterByDate: value,
                    page: 1,
                    pageSize: this.get('pageSize')
                };

                this.transitionToRoute('hosts', { queryParams: params});
            }
        },
        
        filterByTerm: function(value) {
            let params = {
                filterByDate: this.get('filterByDate'),
                page: 1,
                pageSize: this.get('pageSize')
            };

            if (value) {
                params['filterByTerm'] = value;
            } else {
                params['filterByTerm'] = "";
            }
            
            this.transitionToRoute('hosts', { queryParams: params});
        }
    }
});

Problem is that URL is updated and contains filterByDate, but first component property-pie-chart does not detect that filterByDate property is changed, altough i checked attributes in init/didUpdate methods and parameter is changed, can somebody help and explain what i am doing wrong?

2

Probably have something to do with how the query params are configured. Check the doc on Route#queryParams

3

if you are talking about refreshModel in my route, it is set to true on filterByDate query param