derickbailey / 1.html

Created April 11, 2012


    
    View 1.html 
  
  
      1.html
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
          
          
            <script id="modal-view-template" type="text/html">
  <div class="modal-header">
    <h2>This is a modal!</h2>
  </div>
  <div class="modal-body">
    <p>With some content in it!</p>
  </div>
  <div class="modal-footer">
    <button class="btn">cancel</button>
    <button class="btn-default">Ok</button>
  </div>
</script>
 
<div id="modal"></div>

          
    View 1.html 
  
  
      2.js
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            1
            2
            3
            4
            5
            6
            7
          
          
            var view = new MyView();
view.render();
 
var $modalEl = $("#modal");
 
$modalEl.html(view.el);
$modalEl.modal();

          
    View 1.html 
  
  
      3.js
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
          
          
              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');
    }
  });

          
    View 1.html 
  
  
      4.js
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
          
          
            var App = new Backbone.Marionette.Application();
 
App.addRegions({
  main: "#main-content",
  modal: ModalRegion
});
 
// somewhere else in the app
var view = new MyView();
App.modal.show(view);