jQuery UI的骨幹和木偶對話框

我正在尋找一個乾淨的方式來使用jQuery對話框在Backbone和/或Backbone.Marionette的上下文中。jQuery UI的骨幹和木偶對話框

我想要我在MY OTHER WEBSITE上的確切功能，當用戶點擊註冊「或」登錄「這是我自己建立的一個網站，但它是當我剛剛學習jquery和代碼非常意大利麪條像很多DOM操作，並沒有太多的結構，我加載了3個單獨的jQuery對話框到內存中，並使用「打開」和「關閉」來操作它們。結構更好，意大利麪條代碼更少，我只想將一個jQuery對話框加載到內存中，其中包含Marionette.Region，然後根據點擊鏈接切換視圖（「Login」，「Register」或「忘記密碼」）：

在_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();

我有這個問題：

渲染視圖的方法被調用兩次。
第一次加載對話框時，您可以看到它被拋入DOM，然後運行對話框打開動畫。
隨後的時間對話框負載，對話框動畫完全不
Application.modal.close（）發生不會觸發hideModal（）
不是一個問題，但我怎麼能把每個視圖的特定dialogOptions到風景？（在showModal中引用）

是的，這裏存在很多問題，但我確定它們是相關的。

任何幫助非常感謝。

來源

2012-12-13 parliament

這篇文章是有點老了，所以它的使用木偶的過時的版本......但這些想法仍然有效：http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/

來源

2012-12-14 02:16:45

感謝您的回覆。我閱讀了我試圖應用它的文章，但遇到了問題。我更新了我的代碼和OP，我希望你可以再看看和幫助。 – parliament

這是另一個全面的，覆蓋方式比木偶，但你所有的工具鏈和環境。 http://addyosmani.github.com/backbone-fundamentals/#backbone.marionette –

的方法我已經在過去使用獲得骨幹網/對木偶與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-24 10:56:37 Prisoner

jQuery UI的骨幹和木偶對話框

回答

相關問題