Ember-table: ошибка при использовании в скрытом div (обходные пути приветствуются!)

Question

Я пытаюсь использовать ember-table внутри Bootstrap вкладка, но, очевидно, если таблица содержится во вкладке, которая изначально display: noneмакет таблицы не работает: все имеет неправильный размер и застревает в верхнем левом углу контейнера таблицы.

Я сузил проблему, сделав вручную display-dogled и он демонстрирует такое же поведение.

У меня есть пара идей, как обойти это, но мне интересны идеи других.

Кроме того, я должен подать это как ошибку? Похоже на общий случай использования.

Answer 1

Вы можете изменить размер таблицы при открытии вкладки.

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

Answer 2

Это может быть немного поздно, но я использую Ember Table 0.4.1 (последняя), и я обнаружил, что ember Table перерисовывает при изменении размеров окна, поэтому я использовал это, чтобы вкладка показывала таблицу при изменении вкладки:

$(window).resize();

и это сработало, угасающая таблица перерисовывает себя всякий раз, когда я меняю вкладку.

Answer 3

У меня была похожая ситуация, хотя и не совсем такая. Сначала я показываю компонент ember-table в "легком" представлении с одной шириной, но пользователь может переключаться между этим и "полным" представлением с большей шириной (как подразумевается его контейнером). Переключение на большую ширину позволило бы правильно определить размер контейнера, но часть таблицы 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());
  }
}