1

ログ（ポッド構造）と言うルートを作成し、controller.js、route.js、およびtemplate.hbsを作成しました

テンプレートで、グリッド コンポーネントを初期化しました。また、カスタム ページネーション コンポーネントに取り組んでいます。

グリッドコンポーネントを初期化すると、ページネーションからページを変更した後に変更されるデータが属性としてあり、ページサイズ、グリッドコンテナに収まる行数を計算したい。また、pageSize を取得することで、totalPages を計算できます。

グリッド コンポーネントで pageSize を計算する機能がありますが、controller.js でその数値が必要です。アクションを送信することでそれを管理し、コントローラーに番号を正常に取得しました。

次に、dataHandler 計算プロパティで、グリッドが表示するデータを計算したいと思います。そこで非推奨エラーが発生し、グリッドには何も表示されません。

非推奨: のプロパティが didInsertElement フック内で変更されました。パフォーマンスが大幅に低下するため、didInsertElement 中にコンポーネント、サービス、またはモデルのプロパティを変更しないでください。[非推奨 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);
 }
});
4

1 に答える 1