marionette - 关闭模态对话框后刷新基础视图

Question

建议和代码示例

我是 Backbone 木偶的新手，我有一个视图（“JoinCommunityNonmemberWidgetview.js”），它打开了一个模式对话框（“JoinCommunityDetailWidgetview.js”）。在关闭对话框时（我希望视图 JoinCommunityNonmemberWidgetview.js“）再次刷新通过调用视图JoinCommunityNonmemberWidgetview.js的特定函数“submitsuccess”。我该如何实现呢。

模态代码如下：

define(

[
    "grads",
    "views/base/forms/BaseFormLayout",
    "models/MembershipRequestModel",
    "require.text!templates/communitypagewidget/JoinCommunityWidgetDetailTemplate.htm",
],

function (grads, BaseFormLayout, MembershipRequestModel, JoinCommunityWidgetDetailTemplate) {
    // Create custom bindings for edit form

    var MemberDetailbindings = {
        '[name="firstname"]': 'FirstName',
        '[name="lastname"]': 'LastName',
        '[name="organization"]': 'InstitutionName',
        '[name="email"]': 'Email'
    };

    var Detailview = BaseFormLayout.extend({

        formViewOptions: {

            template: JoinCommunityWidgetDetailTemplate,
            bindings: MemberDetailbindings,
            labels: {
                'InstitutionName': "Organization"
            },

            validation: {
                'Email': function (value) {
                    var emailconf = this.attributes.conf;
                    if (value != emailconf) {
                        return 'Email message and Confirm email meassage should match';
                    }
                }
            }


        },

        editViewOptions: {
            viewEvents: {
                "after:render": function () {
                    var self = this;
                    var btn = this.$el.find('#buttonSubmit');
                    $j(btn).button();
                }
            }
        },



        showToolbar: false,

        editMode: true,

        events: {
            "click [data-name='buttonSubmit']": "handleSubmitButton"
        },

        beforeInitialize: function (options) {

            this.model = new MembershipRequestModel({ CommunityId: this.options.communityId, MembershipRequestStatusTypeId: 1, RequestDate: new Date() });


        },

        onRender: function () {


            BaseFormLayout.prototype.onRender.call(this)
        },
        handleSubmitButton: function (event) {
            this.hideErrors();
            //  this.model.set({ conf: 'conf' });
            this.model.set({ conf: this.$el.find('#confirmemail-textbox').val() });
            //this.form.currentView.save();
            //console.log(this.form);
            this.model.save({}, {
                success: this.saveSuccess.bind(this),
                error: this.saveError.bind(this),
                wait: true
            });
        },

        saveSuccess: function (model, response) {
            var mesg = 'You have submitted a request to join this community.';
            $j('<div>').html(mesg).dialog({
                title: 'Success',
                buttons: {
                    OK: function () {
                        $j(this).dialog('close');
                    }
                }
            });
            grads.modal.close();

        },

        saveError: function (model, response) {
           var msg = 'There was a problem. The request could not be processed.Please try again.';
            $j('<div>').html(msg).dialog({
                title: 'Error',
                buttons: {
                    OK: function () {
                        $j(this).dialog('close');
                    }
                }
            });

        }

    });

    return Detailview;
}

);

Answer 1

I would use Marionette's event framework. Take a look at: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.commands.md

Specifically, you need to:

1) Create a marionette application :

App = new Marionette.Application();

2) Use the application to set up event handlers

//Should be somewhere you can perform the logic you are after 
App.commands.setHandler('refresh');

3) Fire a 'command' and let marionette route the event

App.execute('refresh');