我创建了一个路径让我们说日志(pods结构),我创建了controller.js,route.js和template.hbs
在模板中,我初始化了一个网格组件 . 此外,我正在研究自定义分页组件 .
当我初始化网格组件时,我将从页面更改页面后更改的数据作为属性,并且我还要计算页面大小,网格容器中适合的行数 . 通过使用pageSize我可以计算totalPages .
我有在网格组件中计算pageSize的功能,但我想在我的controller.js中使用该数字 . 我通过发送动作来管理,我在控制器上成功编号 .
然后在dataHandler computed属性上,我想计算网格将显示的数据 . 在那里我得到了弃用错误,网格中也没有显示任何内容:
DEPRECATION: A property of was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation. [deprecation id: ember-views.dispatching-modify-property]
这种情况可能吗?如果是,最好的方法是什么?
在我的代码下面:
日志/ controller.js
export default Ember.Controller.extend({
dataHandler: Ember.computed('pageSize', {
set(key, value) {
if (value) {
this.set('pageSize', value);
} else {
this.set('pageSize', null);
}
return value;
},
get() {
let data = this.get('data');
if (!data) {
let pageSize = this.get('pageSize');
data = this._data(); //Here will calculate the data and pass them to component
this.set('data', data);
}
return data;
}
}),
actions: {
setPageSizeFromDataGrid(pageSize) {
this.set('dataHandler', pageSize);
}
}
});
日志/ template.hbs
<div class='row'>
<div class='col-md-12'>
<h1>Request Logs</h1>
{{#si-data-grid data=dataHandler rowHeight=35 pageSize="setPageSizeFromDataGrid"}}
//some content
{{/si-data-grid}}
</div>
</div>
我的component.js
export default Ember.Component.extend({
didRender() {
let that = this;
that._calculateContainerHeight();
let children = that.childViews;
let rowHeight = that.rowHeight || 20;
let data = that.data;
let columns = that._parseColumns(children);
let pageSize = that.getPageSize(rowHeight);
that.sendAction('pageSize', pageSize);
Ember.$(that.get('element')).find('div#si-data-grid').kendoGrid({
columns: columns,
dataSource: new kendo.data.DataSource({
data: data
})
});
Ember.$(that.get('element')).find('div#si-data-grid tr').css('height', rowHeight);
},
getPageSize(rowHeight) {
let paginationHeight = 40;
let gridHeaderHeight = this.$().offsetParent().offset().top;
let height = this.$().height() - gridHeaderHeight - paginationHeight;
return Math.floor(height / rowHeight);
}
});
1 回答
我设法找到了解决问题的方法 .
在我的component.js中,我添加了didInsertElement并安排afterRender发送动作
在logs / template.hbs上
在我的日志/ controller.js上