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，那就太好了

<强>更新我很高兴你解决了这个问题。但后来我想强调什么是ember指南的计算属性。

简而言之，计算属性允许您将函数声明为属性。您可以通过将计算属性定义为函数来创建一个，当您要求属性时， Ember将自动调用。然后，您可以像使用任何普通的静态属性一样使用它。

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

emberjs组件属性未更新？

1 个答案: