emberjs组件属性没有更新？

Question

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?

Answer 1

Currently you are not setting filterByDate property in controller.

I would suggest the following approach, You please declare the below property in corresponding route.js ,

queryParams: { page: { refreshModel: true }, pageSize: { refreshModel: true },sortOrder: { refreshModel: true },filterByDate: { refreshModel: true },filterByTerm: { refreshModel: true }}

refreshModel denotes is whenever this property changed,then it will force to refresh the page.

and in controller.js , You don't need to call this.transitionToRoute('hosts', { queryParams: params}); instead you just set required queryParams participating property alone then transition will automatically taken care.

SideNote: It's good if you can change function name filterByTerm filterByDate by the way this is not related to problem

Update: I am glad you sorted out the problem. but then I want to emphasize what are Computed Properties from ember guides.

In a nutshell, computed properties let you declare functions as properties. You create one by defining a computed property as a function, which Ember will automatically call when you ask for the property . You can then use it the same way you would any normal, static property.

https://guides.emberjs.com/v2.8.0/object-model/computed-properties/#toc_what-are-computed-properties