2

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

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

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

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

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

非常感谢任何帮助。

4

2 回答 2

2

这篇文章有点老了，所以它使用的是过时版本的木偶......但这些想法仍然有效： http: //lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-骨干和木偶/

于 2012-12-14T02:16:45.457 回答
0

我过去不得不使用的一种方法来让骨干/木偶与 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改为在渲染时使用新创建的模式对话框，然后绑定事件。

于 2013-10-24T10:56:37.450 回答