Показать пустой вид в Marionette CompositeView

Я использую Marionette CompositeView для рендеринга html-таблицы. Прекрасно работает! Теперь я хочу отображать сообщение, когда в коллекции нет записей. В настоящее время я использую свойство emptyView для отображения этого сообщения. Однако сообщение отображается в оболочке таблицы, а заголовки столбцов таблиц все еще видны. Не совсем то, что я хочу. В идеале я хотел бы скрыть/удалить таблицу и отобразить представление пустой записи, а затем показать ее, когда будут добавлены записи. Я изо всех сил стараюсь найти лучший подход к решению этой проблемы. Есть ли там предложения?

EmptyView = Marionette.ItemView.extend({
template: "#empty-template"
});

SupportMemberView = Marionette.ItemView.extend({
template: "#member-template"
});

SupportTeamView = Marionette.CompositeView.extend({
template: "#support-team-template",
itemView: SupportMemberView,
emptyView: EmptyView,
itemViewContainer: 'tbody'
});

Ответы

Ответ 1

Одна вещь, которую вы можете сделать, - это ваш emprty. Используйте функцию onRender, чтобы скрыть таблицу. эта функция вызывается после функции рендеринга, поэтому вы сможете манипулировать dom, чтобы выглядеть так, как вы хотите.

Ответ 2

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

Я думаю, что альтернативный способ сделать это - использовать динамические шаблоны в составном представлении. Это делается путем переопределения базового метода get getTemplate(). Таким образом, ваш составной вид будет определяться следующим образом, если вы имеете доступ к библиотеке underscore.js или эквиваленту для замены функции "_.isEmpty()":

SupportTeamView = Marionette.CompositeView.extend({
getTemplate: function() {
  if (_.isEmpty(this.collection)) {
       return "#empty-template"
  } else {
       return "#support-team-template";
  }
itemView: SupportMemberView,
emptyView: EmptyView,
itemViewContainer: 'tbody'
});