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）使用opensource for tw bootstrap 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，make base classes ...

执行此操作

如何使用布局内容加载模态对话框？

1 个答案: