下面是我的代码片段,所有内容都写在同一个ArrayController中。
statusList: [
{key: 'all', label: _('All')},
{key: 'active', label: _('Active')},
{key: 'deleted', label: _('Deleted')}
],
statusLabel: function(){
var searchState = this.get('pagination.search_state');
var status = this.get('statusList').findBy('key', searchState);
return status && status.label || _('All');
}.property('pagination.search_state'),
pagination: function(){
return this.store.metadataFor('xyz'); //xyz being my model name
}.property('model.@each.id'),
actions:{
statusClicked: function(key){
var statusList = this.get('statusList');
var status = this.get('statusList').findBy('key', key);
if(status){
var params = this.searchParams();
params.search_state = key;
//function to get the data from server and refreshing pagination
}
}
}
,相关模板包含以下代码
<div class="dropdown">
<a {{bind-attr data-target="#"}} data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{statusLabel}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
{{#each status in statusList}}
<li><a {{bind-attr href="#"}} {{action 'statusClicked' status.key}}>{{status.label}}</a></li>
{{/each}}
</ul>
</div>
我的问题是,即使在刷新分页并且更改了search_state属性之后,statusLabel
属性也没有注册属性更改,也没有动态更新模板。
我知道我可以使用notifyPropertyChange('pagination')
作为解决方法,但想通过观察分页的search_state属性的变化来理解为什么statusLabel
属性不会自行更改。