3

タブ内でember-tableを使用しようとしていBootstrapますが、どうやらテーブルが初期のタブに含まれている場合、display: noneテーブルのレイアウトが機能しません。すべてのサイズが正しくなく、テーブルの左上にスタックしています。容器。

display手動で切り替えたdiv を作成して問題を絞り込みましたが、同じ動作を示します。

これを回避する方法についていくつかのアイデアがありますが、他の人のアイデアに興味があります。

また、これをバグとして報告する必要がありますか? 一般的なユースケースのようです。

4

3 に答える 3

0

まったく同じではありませんが、私も同様の状況にありました。最初に ember-table コンポーネントを 1 つの幅の「ライト」ビューで表示しますが、ユーザーはそれと幅の広い「フル」ビューを切り替えることができます (コンテナーによって暗示されます)。より大きな幅に切り替えると、コンテナのサイズは正しくなりますが、ライト ビューに表示されない ember テーブルの部分には、セルの内容、境界線、列ヘッダーではなく空白のみが含まれます。コンテナの寸法が変更された後、再レンダリングされなかったかのようです。

私が見つけた解決策は、このライト/フル モードがユーザーによって切り替えられたときに変更される外部プロパティに基づいて、手動でテーブルの再レンダリングを強制することでした。これを実現するために、次のようにテーブル コンポーネントを拡張しました。

export default Ember.Table.EmberTableComponent.extend({

  // exposes a hook to resize (i.e. rerender) the table when it would otherwise
  // not have been detected
  resizeTriggered: function() {
    this.handleWindowResize();
  }.observes('resizeTrigger')
});

私は ember-cli を使用しているので、上記を components/my-table-component.js の下に保存しました。

これを行ったら、次のようにテンプレートにテーブルを含めます。

{{my-table-component
  columnsBinding="columns"
  contentBinding="content"
  resizeTrigger=resizeTriggerProperty
}}

ここで、テーブルが再レンダリングされるようにするたびに、コントローラーの resizeTriggerProperty を任意の (新しい) 値に更新するだけです。私の場合、アクションの過程で設定します (例: MyRouteController):

actions: {
  triggerResize: function() {
    this.set('resizeTriggerProperty', new Date().getTime());
  }
}
于 2014-09-24T02:16:46.673 に答える
0

これは少し遅いかもしれませんが、私は Ember Table 0.4.1 (最新) を使用しています。ウィンドウのサイズ変更時に Ember テーブルが再描画されることがわかったので、これを使用して、タブが変更されたときにタブにテーブルが表示されるようにしました。

$(window).resize();

これでうまくいきました。タブを変更するたびに、emberテーブルが再描画されます。

于 2015-04-13T10:04:58.960 に答える