Menggunakan Mixin di backbone (dan MarionetteJS). Penerapan mixin dibantu oleh Cocktail

ajaxHandler.js

define(function(require) {
    'use strict';

    var _ = require('underscore')

    return {
        handleAjaxSuccess: function() {
            if (_.isFunction(this.closeForm)) {
                this.closeForm()
            }

            if (_.isFunction(this.triggerMethod)) {
                this.triggerMethod('ajax:success', arguments);
            }
        },

        handleAjaxError: function(model, response) {
            var view = this.region.currentView,
                responseJSON = response.responseJSON

            if (view && (responseJSON && responseJSON.message)) {
                if (_.isFunction(view.displayFormError)) {
                    view.displayFormError(responseJSON.message)
                }
            }

            if (_.isFunction(this.triggerMethod)) {
                this.triggerMethod('ajax:error', arguments);
            }
        }
    }
});

confirmBox.js

define(function(require) {
    'use strict';

    var _ = require('underscore'),
        $ = require('jquery');

    var tpl = require('text!templates/confirm.tpl');

    return {

        confirmEl: null,

        displayConfirmBox: function(params) {
            params = params || {}

            if (!this.confirmEl) {
                throw new Error('Confirm El must be defined in order to show confirmation box')
            }

            this._confirmBoxDfd = new $.Deferred()

            this.renderConfirmBox(
                this.confirmEl,
                tpl,
                params.data || {message: '...'}
            )

            return this._confirmBoxDfd;
        },

        renderConfirmBox: function(el, tpl, data) {
            var html = _.template(tpl, data);

            $(el).html(html);
            this.registerConfirmBoxEventHandler(el);
        },

        registerConfirmBoxEventHandler: function(el) {
            var msgBox = this
            $(el).on("click", 'button[data-ui-component="cancel"]', function() {
                msgBox.closeConfirmBox()
            })
            $(el).on("click", 'button[data-ui-component="confirm"]', function() {
                msgBox.closeConfirmBox()
                msgBox._confirmBoxDfd.resolve()
            })
        },

        closeConfirmBox: function() {
            if (this.confirmEl) {
                this.destroyConfirmBox(this.confirmEl)
            }
        },

        destroyConfirmBox: function(el) {
            $(el).contents().remove()
        }

    }
});

deletePresenter.js

define(function(require) {
    'use strict';

    var Presenter = require('customs/presenter'),
        MB = require('messageBus'),

        ConfirmBox = require('mixins/confirmBox/confirmBox'),
        MessageBox = require('mixins/messageBox/messageBox'),

        _ = require('underscore');

    return Presenter.extend({

        mixins: [ConfirmBox, MessageBox],

        confirmEl: '#alert-region',
        messageEl: '#alert-region',

        initialize: function(params) {
            if (!params.region) {
                throw new Error('Parameters to initialize Delete Level Presenter are not complete');
            }

            this.region = params.region;

            MB.commands.setHandler('deletelevel', this.handleDeleteCommand, this);
            _.bindAll(this, 'handleDeletingSuccess', 'handleDeletingFailure')
        },

        handleDeleteCommand: function(params) {
            params = params || {};

            var model = params.model,
                presenter = this;

            if (model) {
                this.displayConfirmBox({
                    data: {
                        message: "Anda akan menghapus jenjang " + model.get("name")
                    }
                }).done(function() {
                    model.destroy({
                        wait: true,
                        success: presenter.handleDeletingSuccess,
                        error: presenter.handleDeletingFailure
                    })
                })
            }
        },

        handleDeletingSuccess: function(model) {
            MB.vent.trigger("level:deleted", {
                model: model
            })
        },

        handleDeletingFailure: function(model, response, options) {
            var responseJSON = response.responseJSON;

            if (responseJSON && responseJSON.message) {
                this.displayMessageBox({
                    data: {
                        message: responseJSON.message
                    }
                })
            }
        }

    });
});

editPresenter.js

define(function(require) {
    'use strict';

    var Presenter = require('customs/presenter'),
        View = require('./view'),
        _ = require('underscore'),

        AjaxProcessingMixin = require('mixins/ajaxProcessingView/processing'),
        MessageBoxMixin = require('mixins/messageBox/messageBox'),
        BackboneAjaxHandler = require('mixins/backboneAjaxHandler/ajaxHandler'),

        MB = require('messageBus')

    return Presenter.extend({

        mixins: [AjaxProcessingMixin, MessageBoxMixin, BackboneAjaxHandler],

        initialize: function(params) {
            if (!params.region) {
                throw new Error('Parameters to initialize Edit Level Presenter are not complete')
            }

            this.region = params.region
            
            MB.commands.setHandler('editlevel', this.editLevel, this)
            _.bindAll(this, 'handleAjaxSuccess', 'handleAjaxError')
        },

        editLevel: function(params) {
            if (!params.model) {
                throw new Error('Model is undefined. Cannot render Edit Level Form')
            }

            this.renderForm(params.model)
        },

        renderForm: function(model) {
            var view = new View({
                model: model
            })

            this.region.show(view)
            this.attachHandlerForView(view)
            return view
        },

        attachHandlerForView: function(view) {
            this.listenTo(view, 'level:saved', this.handleSave)
            this.listenTo(view, 'level:cancelled', this.handleCancel)
            this.listenTo(view, 'level:deleted', this.handleDeleting)
            this.listenTo(view, 'item:before:close', this.handleViewBeforeClose)
        },

        handleSave: function(params) {
            var view = params.view,
                model = view.model

            view.displayProcessingMessage()
            
            model.save(view.getInputValue(), {
                wait: true,
                success: this.handleAjaxSuccess,
                error: this.handleAjaxError
            });
        },

        handleCancel: function(params) {
            this.closeForm();
        },

        handleDeleting: function(params) {
            // Tidak penting
        },

        closeForm: function() {
            // tidak penting
        },

        handleViewBeforeClose: function() {
            var view = this.region.currentView;

            if (view) {
                this.stopListening(view);
            }
        },

        onClose: function() {
            MB.commands.removeHandler('editlevel');
        }

    });
});

messageBox.js

define(function(require) {
    'use strict';

    var _ = require('underscore');
    var defaultTpl = require('text!templates/messageBox.tpl');

    return {

        messageEl: null,
        
        displayMessageBox: function(params) {
            params = params || {};

            if (this.messageEl) {
                this.renderMessageBox(
                    this.messageEl,
                    params.tpl || defaultTpl,
                    params.data || {message: '...'}
                )
            }
        },

        renderMessageBox: function(el, tpl, data) {
            var html = _.template(tpl, data);

            $(el).html(html);
            this.registerMessageBoxEventHandler(el);
        },

        registerMessageBoxEventHandler: function(el) {
            var msgBox = this;
            $(el).on("click", 'button[data-ui-component="ok"]', function() {
                msgBox.closeMessageBox()
            });
        },

        closeMessageBox: function() {
            if (this.messageEl) {
                this.destroyMessageBox(this.messageEl)
            }
        },

        destroyMessageBox: function(el) {
            $(el).contents().remove()
        }
    }
});