Question

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

当用户点击“注册”或“登录”时，我想要MY OTHER WEBSITE上的确切功能。这是我自己构建的网站，但是当我刚刚学习jquery时，代码很像意大利面条有很多DOM操作，结构不多。我在内存中加载了3个独立的jQuery对话框，并使用“open”和“close”来操作它们。

现在我正在使用Backbone和Marionette构建一个新站点，并希望具有相同的功能，但具有更好的结构和更少的意大利面条代码。我想只将一个jQuery对话框加载到内存中，里面有一个Marionette.Region，然后根据点击的链接切换区域内的View（“登录”，“注册”或“忘记密码”）：< / p> _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();

我遇到了这个问题：

视图的render方法被调用两次。
第一次加载对话框时，您可以看到它被抛入DOM，然后运行对话框打开动画。
随后对话框加载，对话框动画根本不会发生
Application.modal.close（）不会触发hideModal（）
不是问题，但如何将每个视图的特定dialogOptions附加到视图？（将在showModal中引用）

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

任何帮助都非常感激。

Answer 1

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

Answer 2

我过去必须使用的一种方法是让骨干/牵线木偶与iLightBox很好地配合使用，如下所示：

onShow: function(){
    var self = this;
    $.iLightBox([
    {
        URL: '#competition',
        type: 'inline',
        options: {
            onRender: function(){
                console.log($('.ilightbox-container #competition'));
                self.$el = $(".ilightbox-container #competition");
                self.delegateEvents(self.events);
            }
        }
    }
    ]);
}

这会更改itemview以在渲染时使用新创建的模态对话框，然后绑定事件。

带有Backbone和Marionette的Jquery UI对话框

2 个答案: