Visualizzazione visualizzazione vuota in Marionette CompositeView

Question

Utilizzo una Marionette CompositeView per il rendering di una tabella html. Funziona alla grande! Ora voglio visualizzare un messaggio quando non ci sono record nella collezione. Attualmente sto usando la proprietà emptyView per rendere questo messaggio. Tuttavia, il messaggio viene visualizzato nel wrapper della tabella e le intestazioni delle colonne delle tabelle sono ancora visibili. Non esattamente quello che voglio. Idealmente, mi piacerebbe nascondere/rimuovere la tabella e visualizzare la vista dei record vuota e quindi mostrarla quando vengono aggiunti i record. Sto lottando per trovare l'approccio migliore per gestirlo. Ci sono dei suggerimenti là fuori?

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

Una cosa che puoi fare è sul tuo emprty Visualizza la funzione onRender per nascondere la tabella. questa funzione è chiamata dopo la funzione di rendering, quindi sarai in grado di manipolare la dom per apparire nel modo desiderato.

Answer 2

La risposta accettata impone una dipendenza tra la vista vuota e il modello, che non sembra corretto.

Penso che un modo alternativo per farlo sia utilizzare i modelli dinamici nella vista composita. Ciò avviene sovrascrivendo il metodo getTemplate() di base View. Così la vostra vista composita sarebbe definito come segue, a patto di avere accesso alla libreria underscore.js o equivalenti a sostituire la "_.isEmpty) (" Funzione:

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