Wyświetlanie pustego widoku w Marionetce CompositeView

Question

Używam marionetki CompositeView do renderowania tabeli html. Działa świetnie! Teraz chcę wyświetlić komunikat, gdy nie ma żadnych rekordów w kolekcji. Obecnie używam właściwości emptyView do renderowania tej wiadomości. Jednak komunikat jest renderowany w opakowaniu tabeli, a nagłówki kolumn w kolumnach są nadal widoczne. Nie dokładnie to, co chcę. Idealnie chciałbym ukryć/usunąć tabelę i wyświetlić pusty widok rekordów, a następnie pokazać go po dodaniu rekordów. Staram się znaleźć najlepsze podejście do radzenia sobie z tym. Czy są tam jakieś sugestie?

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' 
}); 

Answer 1

Jedną rzeczą, którą możesz zrobić, to na swoim emprście Zobacz, użyj funkcji onRender, aby ukryć tabelę. ta funkcja jest wywoływana po funkcji renderowania, więc będziesz mógł manipulować domem tak, jak chcesz.

Answer 2

Przyjęta odpowiedź narzuca zależność między pustym widokiem a szablonem, co nie jest właściwe.

Myślę, że alternatywnym sposobem jest użycie szablonów dynamicznych w widoku złożonym. Odbywa się to przez przesłonięcie metody Base View getTemplate(). Zatem Twój kompozytowy widok byłoby zdefiniowane w następujący sposób, zakładając, że masz dostęp do underscore.js biblioteki lub odpowiednik zastąpić „_.isEmpty()” Funkcja:

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