emberjs組件屬性沒有更新？

Question

我的模板中有兩個組件：

{{ 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
}}

我將paged-filtered-list組件的動作發送到控制器，它以filterByDate作為參數觸發路由轉換：

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});
        }
    }
});

問題是URL已更新並包含filterByDate，但第一個組件屬性 - 餅圖未檢測到filterByDate屬性已更改，盡管我檢查了init / didUpdate方法中的屬性並且參數已更改，有人可以幫助並解釋我在做什么錯誤？

Answer 1

目前您沒有在控制器中設置filterByDate屬性。

我建議采用以下方法，請在相應的route.js聲明以下屬性，

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

refreshModel表示只要此屬性發生更改，它就會強制刷新頁面。

在controller.js ，您不需要調用this.transitionToRoute('hosts', { queryParams: params}); 相反，您只需設置所需的queryParams參與屬性，然后轉換將自動處理。

SideNote：如果您可以通過與問題無關的方式更改函數名稱filterByTerm filterByDate ， filterByTerm filterByDate了

更新：我很高興你解決了這個問題。 但后來我想強調什么是ember指南的計算屬性。

簡而言之，計算屬性允許您將函數聲明為屬性。 您可以通過將計算屬性定義為函數來創建一個， 當您要求屬性時 ， Ember將自動調用該屬性 。 然后，您可以像使用任何普通的靜態屬性一樣使用它。

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