jquery-ui - 带有 Backbone 和 Marionette 的 Jquery UI 对话框

Question

我正在寻找一种在 Backbone 和/或 Backbone.Marionette 上下文中使用 jquery 对话框的干净方法。

我想要 MY OTHER WEBSITE 上的确切功能当用户单击“注册”或“登录”时。这是我自己构建的网站，但那是在我刚刚学习 jquery 时，代码非常像意大利面条，有大量 DOM 操作，但没有太多结构。我加载了 3 个独立的 jQuery 对话框进入内存并使用“打开”和“关闭”来操作它们。

现在我正在使用 Backbone 和 Marionette 构建一个新网站，并且想要相同的功能，但具有更好的结构和更少的意大利面条代码。我想只将一个 jQuery 对话框加载到内存中，其中包含 Marionette.Region，然后根据单击的链接(“登录”、“注册”或“忘记密码”)切换该区域内的 View :

在_Layout.cshtml中:

<div id="dialog">
            <div id="viewContainer"></div>
        </div>

在 BackboneApp.js 中:

App.Regions.ModalRegion = Backbone.Marionette.Region.extend({

    el: '#dialog',
    constructor: function () {
        _.bindAll(this);
        Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
        this.on("show", this.showModal, this);
    },
    getEl: function (selector) {
        var $el = $(selector);
        return $el;
    },
    showModal: function (view) {
        view.on("close", this.hideModal, this);
        this.$el.dialog(view.dialogOptions);
        this.$el.dialog('open');
    },
    hideModal: function () {
        this.$el.dialog('close');
    }
});


App.Views.LoginView = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'render');
    },
    el: '#viewContainer',
    render: function () {
        $(this.el).load("/Account/Login", function () { });
        return this;
    }
});

var loginOptions = $.extend({}, defaultOptions, {
    title: "Log in",
    buttons: {
        "Log in": function () {
            //LOGIN POST
            Application.modal.close();
        }
    }
});

//Marionette Application
var Application = new Backbone.Marionette.Application();

Application.addRegions({
    modal: App.Regions.ModalRegion
});

Application.addInitializer(function (startOptions) {

    $('#loginLink').live('click', function () {
        var loginView = new App.Views.LoginView();
        Application.modal.show(loginView);
    });

});
Application.start();

我遇到了问题:

1. View 的渲染方法被调用两次。
2. 第一次加载对话框时，您可以看到它被扔到 DOM 中，然后运行对话框打开动画。
3. 随后加载对话框时，根本不会出现对话框动画
4. Application.modal.close() 不会触发 hideModal()
5. 不是问题，但如何将每个 View 的特定dialogOptions附加到 View ？ (在showModal中引用)

是的，那里有很多问题，但我确信它们是相关的。

非常感谢任何帮助。

Answer 1

这篇文章有点旧，所以它使用的是过时版本的 Marionette...但想法仍然有效:http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/