Ember表:在隐藏的div中使用时失败(欢迎使用变通方法！)

Question

我试图在Bootstrap选项卡中使用ember表，但显然，如果该表包含在最初为display: none的选项卡中，则表布局不起作用：所有内容的大小都不正确，并卡在表容器的左上角。

我通过制作一个手动display切换的div缩小了问题的范围，它也表现出了相同的行为。

我对如何解决这个问题有一些想法，但我对其他人的想法感兴趣。

此外，我应该将其作为bug进行归档吗？这似乎是一个常见的用例。

Answer 1

您可以在打开选项卡时调整表格的大小。

this.get('tableController').set('_width',820);

Answer 2

我也遇到过类似的情况，尽管不完全相同。我最初以一个宽度的"轻"视图显示ember表组件，但用户可以在该视图和一个宽度更大的"全"视图之间切换(正如其容器所暗示的那样(。切换到更大的宽度将正确调整容器的大小，但在灯光视图中不可见的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());
  }
}

Answer 3

这可能有点晚了，但我使用的是Ember表0.4.1(最新版本(，我发现Ember表会在窗口大小调整时重新绘制，所以我用它让选项卡在选项卡更改时显示表：

$(window).resize();

这就成功了，每当我更改选项卡时，ember表都会重新绘制自己。