event in itemView trigger show CompositeView - backbone.js

Question

In formView inside the newAttributes method i would like to trigger an event that will then show the entry view(both are shown here). In order to do this should I use a controller? It seems no matter how I set the trigger and listenTo commands up I get a different error.
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
formBox : '#formBox',
listBox : '#listBox'
});
Entry = Backbone.Model.extend({
defaults: {
DB : 'not specified',
CT : 'not specified',
go : 'not specified'
},
});
EntryList = Backbone.Collection.extend({
model: Entry
});
FormView = Backbone.Marionette.ItemView.extend({
tagName: 'div',
template: '#form-template',
className: 'form',
ui: {
DB: '#DB',
CT: '#CT',
gos: '#gos'
},
events:{
'click #processInput' : 'validateForm'
},
onRender: function(){
console.log("rendering...");
},
validateForm : function(){
var validInput = true;
if(!this.ui.DB.val().trim())
{
validInput = false;
!this.ui.DB.css("background-color","#CC0000");
}
else
{
!this.ui.DB.css("background-color","#ffffff");
}
if(!this.ui.CT.val().trim())
{
validInput = false;
this.ui.CT.css("background-color","#CC0000");
}
else
{
this.ui.CT.css("background-color","#ffffff");
}
if(!this.ui.gos.val().trim())
{
validInput = false;
this.ui.gos.css("background-color","#CC0000");
}
else
{
this.ui.gos.css("background-color","#ffffff");
}
if(validInput)
{
this.hideForm();
this.getEntries(this.ui.DB.val().trim(),
this.ui.CT.val().trim(),this.ui.gos.val().trim());
}
},
newAttributes :function(db,con,gos){
for(go in gos)
{
MyApp.ents.add({DB : db, CT: con, go: gos[go]});
}
//TRIGGER CUSTOM EVENT
},
getEntries : function(db,con,gos){
var gos = gos.split("\n");
for(go in gos)
{
console.log("data bank: " + db + " CT: " + con + " go: |" + gos[go].trim()+"|");
}
this.newAttributes(db,con,gos);
},
hideForm : function(){
this.$el.hide();
}
});
EntryView = Backbone.Marionette.ItemView.extend({
tagName: 'tr',
template: '#entry-template',
className: 'entry',
events: {
'click .delete' : 'destroy'
},
destroy : function(){
this.model.destroy();
}
});
EntriesView = Backbone.Marionette.CompositeView.extend({
tagName: 'table',
template: '#entries-template',
itemView: EntryView,
appendHtml: function(collectionView, itemView){
colleCTionView.$('tbody').append(itemView.el);
}
});
MyApp.addInitializer(function(test){
var entriesView = new EntriesView({
collection: test.DB
});
var formView = new FormView();
//SHOW on load
MyApp.formBox.show(formView);
//SHOW Later with custom event
MyApp.listBox.show(entriesView)
});
$(document).ready(function(){
MyApp.ents = new EntryList([]);
MyApp.start({DB: MyApp.ents});
});

Answer 1

There are 2 ways you can solve your problem.
The cleanest way is to use a controller, and listen for the triggered event on the view instance within the controller. E.g. in your view, have this.trigger("my:event"), then in your controller have myFormViewInstance.on("my:event", function(...){...})
Another option (which wouldn't really be recommended), is to trigger the event at the application level, and listen for it elsewhere also on the application level. I.e. MyApp.trigger("my:event") and MyApp.listen("my:event")