Backbone および/または Backbone.Marionette のコンテキストで jquery ダイアログを使用するクリーンな方法を探しています。
ユーザーが [登録] または [ログイン] をクリックしたときに、 MY OTHER WEBSITEにある正確な機能が必要です。 3 つの個別の jQuery ダイアログをメモリにロードし、「開く」と「閉じる」を使用してそれらを操作しました。
現在、Backbone と Marionette を使用して新しいサイトを構築しており、同じ機能を必要としていますが、構造が改善され、スパゲッティ コードが少なくなりました。内部に Marionette.Region を含む 1 つの jQuery ダイアログのみをメモリにロードし、クリックされたリンク (「ログイン」、「登録」、または「パスワードを忘れた」) に応じて、領域内のビューを切り替えるだけだと考えていました。
_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 メソッドが 2 回呼び出されます。
- ダイアログが初めて読み込まれると、ダイアログが DOM にスローされ、ダイアログを開くアニメーションが実行されます。
- その後、ダイアログが読み込まれると、ダイアログのアニメーションがまったく発生しません
- Application.modal.close() が hideModal() をトリガーしない
- 問題はありませんが、各ビューの特定の dialogOptions をビューにアタッチするにはどうすればよいですか? (showModal で参照)
はい、そこにはかなり多くの問題がありますが、それらが関連していると確信しています。
どんな助けでも大歓迎です。