Question

在newAttributes方法中的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")

itemView触发器中的事件显示CompositeView

1 个答案: