[英]emberjs component property not updated?
我的模板中有两个组件:
{{ 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方法中的属性并且参数已更改,有人可以帮助并解释我在做什么错误?
目前您没有在控制器中设置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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.