如何使用佈局內容加載模態對話框？

Question

如何以及在哪裏應該使用模態對話框功能來定義區域或功能，以便我可以在視圖中的一個或兩個特定情況下加載它，例如，像通過MyApp.modal.show(content)？

例子：

var ModalRegion = Backbone.Marionette.Region.extend({ 
    el: "#modal", 

    constructor: function(){ 
    _.bindAll(this); 
    Backbone.Marionette.Region.prototype.constructor.apply(this, arguments); 
    this.on("view:show", this.showModal, this); 
    }, 

    getEl: function(selector){ 
    var $el = $(selector); 
    $el.on("hidden", this.close); 
    return $el; 
    }, 

    showModal: function(view){ 
    view.on("close", this.hideModal, this); 
    this.$el.modal('show'); 
    }, 

    hideModal: function(){ 
    this.$el.modal('hide'); 
    } 
}); 

如何在這個視圖中使用它？

MyApp.Views.Layouts.Unauthenticated = Backbone.Marionette.Layout.extend({ 
    template: 'layouts/unauthenticated', 

    regions: { 
    //modal: ModalRegion, //Region must be specified as a selector string or an object with selector property 
    tabContent: '#tab-content' 
    }, 
    events: { 
    'click #showLogin': 'showLogin' 
    }, 
    views: {}, 
    showLogin: function(){ 
    this.views.login = BD.Views.Unauthenticated.Login; 
    MyApp.modal.show(new this.views.login); 
    }, 

Answer 1

你可以用另外兩種方法做。

1）使用開源的TW引導this和without bootstrap

2）如果你喜歡自己的模式，我推薦做自己的「基地」類來定義抽象方法。例如，在CoffeeScript中：

class MyApp.Views.Base.Modal extends Marionette.ItemView 
    ... here is modal code like show etc.... just abstract class 

class MyApp.views.model_custom extends MyApp.Views.Base.Modal 
    ... and here is class with specific details of one modal like element, events, triggers etc... 

在javascript：

var MyApp.Views.Base.Modal = Backbone.Marionette.ItemView.extend({...}) 
var MyApp.views.model_custom = MyApp.Views.Base.Modal.extend({...}) 

及其強烈建議這樣做與像ItemView控件CompositeView中的所有類，使得基類...