What is the best way to add model in a collection from view?

Question

I have a Backbone Marionette app with Router and a Controller. In my app you can view a collection of texts (index route with collection fetching from server), can view existing collection of texts (indexPage route without fetching from server) and can create a new text (form route). Views of list texts and create form are different from each other and changes in region.

I want to add a successully saved model to a collection and then redirect to indexPage route, but what is the best way to get a texts collection from _FormView success callback? Or how to restruct an app to do it simple?

I can send event to a controller with Backbone.Radio but want to deal without it.

Routes

router.processAppRoutes(controller, {
    '': 'index',
    'index': 'indexPage',
    'create': 'form'
});

Controller

_Controller = Marionette.Controller.extend({
    initialize: function () {
        this.list = new _MainTexts();
    },
    index: function () {
        if (!_.size(this.list)) {

            var
            self = this;

            this.list.fetch({

                success: function (collection, response, options) {
                    self.indexPage();
                    return;
                }
            });
        }
        this.indexPage();
    },
    indexPage: function () {

        var
        textsView = new _TextsView({
            collection: this.list
        });
        application.getRegion('contentRegion').show(textsView);
    },
    form: function () {

        var
        formView = new _FormView({
            model: new _MainText()
        });
        application.getRegion('contentRegion').show(formView);
    }
});

Views

_TextView = Marionette.ItemView.extend({

    className: 'item text',
    template: function (serialized_model) {
        return _.template('<p><%= texts[0].text %></p>')(serialized_model);
    }
});

_TextsView = Marionette.CollectionView.extend({
    className: 'clearfix',
    childView: _TextView
});

Form view

_FormView = Marionette.ItemView.extend({
    template: '#form-template',
    ui: {
        text: 'textarea[name="text"]',
        submit: 'button[type="submit"]'
    },
    events: {
        'click @ui.submit': 'submitForm'
    },
    submitForm: function (event) {

        event.preventDefault();
        this.model.set({

            text: this.ui.text.val()
        });

        this.model.save({}, {
            success: function (model, response, options) {

                ???
            }
        });
    }
});

"*can view existing collection of texts (indexPage route without fetching from server) and can create a new text (form route)"*... I'm not sure whether these are questions or statements... *"Views of list texts and create form are different from each other and changes in region."* list texts... create form... I've no idea what these are. Could you please read this question from the perspective of someone who has no idea about your application and rephrase the question accordingly..? — T J, Nov 26 '15 at 06:17
@TJ Ok, maybe I put the question somewhat chaotically, but I'am already find solution. Post solution a little bit later. — Evgeniy, Nov 26 '15 at 06:46
Note: "The Controller object is deprecated. Instead of using the Controller class with the AppRouter, you should specify your callbacks on a plain Javascript object or a Marionette Object" - http://marionettejs.com/docs/v2.4.4/marionette.controller.html — misantronic, Nov 28 '15 at 17:22
@misantronic Thanks for note, I did not detect deprecated warning — Evgeniy, Nov 28 '15 at 18:28

score 0 · Accepted Answer · answered Dec 09 '15 at 13:33

Ok, my problem solution is here. In controller action "form" I create event listener

var
formView = new _FormView({

    model: model
});

formView.on('formSave', function (model) {

    if (id == null) {

        self.list.add(model);
    }

    ...
});

Then in form view I trigger event

this.model.save({}, {

    success: function (model, response, options) {

        if (response.state.success) {

            self.trigger('formSave', model);
        }
    }
});

That's all:)

What is the best way to add model in a collection from view?

1 Answers1