我正在寻找一种在 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();
我遇到了问题:
- View 的渲染方法被调用两次。
- 第一次加载对话框时,您可以看到它被扔到 DOM 中,然后运行对话框打开动画。
- 随后加载对话框时,根本不会出现对话框动画
- Application.modal.close() 不会触发 hideModal()
- 不是问题,但如何将每个 View 的特定dialogOptions附加到 View ? (在showModal中引用)
是的,那里有很多问题,但我确信它们是相关的。
非常感谢任何帮助。
最佳答案
这篇文章有点旧,所以它使用的是过时版本的 Marionette...但想法仍然有效:http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/
关于jquery-ui - 带有 Backbone 和 Marionette 的 Jquery UI 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13869815/