itemView 트리거 이벤트에서 이벤트를 표시합니다. CompositeView

Question

newViewAttributes 메서드 내에서 formView에서 항목보기를 표시하는 이벤트를 트리거하려고합니다. 둘 다 여기에 표시됩니다. 이렇게하려면 컨트롤러를 사용해야합니까? 트리거와 listenTo 명령을 어떻게 설정했는지에 관계없이 다른 오류가 발생합니다.

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

두 가지 방법으로 문제를 해결할 수 있습니다.

가장 깨끗한 방법은 컨트롤러를 사용하고 컨트롤러 내의 뷰 인스턴스에서 트리거 된 이벤트를 수신하는 것입니다. 예 : 보기에서 컨트롤러에 this.trigger("my:event")이 있고 컨트롤러에 myFormViewInstance.on("my:event", function(...){...})이 있고

다른 옵션 (권장되지는 않음)은 응용 프로그램 수준에서 이벤트를 트리거하고 응용 프로그램 수준의 다른 곳에서 이벤트를 수신하는 것입니다. 나는. MyApp.trigger("my:event") 및 MyApp.listen("my:event")