BackboneJS中重用Bootsrap模態視圖

Question

我剛開始學習BackboneJS並在內部變得越來越深我面臨一個問題。我有一個引導模式，我想在我的主視圖中調用被調用事件的函數中填充模態內容，並嘗試找出如何在我的動態生成的模態視圖中插入子視圖。到目前爲止，我的代碼看起來像但不工作

主視圖

//here events are mapped 
    Fefe.Views = Fefe.Views || {}; 

    (function() { 
     'use strict'; 

     Fefe.Views.Editor = Backbone.View.extend({ 

      template: JST['app/scripts/templates/editor.ejs'], 

      tagName: 'div', 

      el: '.container', 

      id: '', 

      className: '', 

      events: { 

       "click button.expand" : "controlToggle", 
       "click .grid" : "grid" 
      }, 


      controlToggle: function(e){ 
       var controlls = $(e.currentTarget).closest('.editor-controls') 

       $(controlls).find('.active').removeClass('active') 
       $(e.currentTarget).parent().addClass('active') 
      }, 

      grid: function() { 

       this.model = new Fefe.Models.Grids({ 
        'title': 'Edit Grids' 
       }) 

       var gridView = new Fefe.Views.Grids({ 
        model: this.model 
       }) 

       var grids = new Fefe.Views.Modal({ 
        model : this.model, 
        subview: gridView 
       }).render() 

      }, 

      initialize: function() { 
       var body = $('body') 
       var rows = body.find('.row') 

       $.each(rows, function(e , v){ 

        $(this).addClass('editor-row empty-row') 

       }) 

      $('.sortable-rows').sortable({ handle: 'button.row-handle.btn.btn-default' }) 
       this.listenTo(this.model, 'change', this.render); 
      }, 

      render: function() { 

       return this; 
      } 

     }); 

    })(); 

模式的看法

//this one holds the modal markup 

    Fefe.Views = Fefe.Views || {}; 

    (function() { 
     'use strict'; 

     Fefe.Views.Modal = Backbone.Marionette.View.extend({ 

      template: JST['app/scripts/templates/modal.ejs'], 

      subview: '', 

      className: "modal", 
      attributes: { 
       tabindex: "-1", 
       role: "dialog", 
      }, 

      initialize: function() {   

       this.template = this.template; 
       console.log(this) 

      }, 

      events: { 
       "click .save": "save", 
       "click .close": "close", 
       "change input": "modify", 
      }, 

     render: function(e) { 

      this.$el.html(this.template(this.model.toJSON())).modal() 

      $(".modal-dialog").draggable({ 
        handle: ".modal-header" 
      }) 

      return this 
     }, 

     show: function() { 
      $(document.body).append(this.render().el); 

     }, 

     close: function() { 
      this.remove(); 
     }, 

     save: function() { 
      if(this.model.id == null) { 
       tasks.create(this.model); 
      } 
      else { 
       this.model.save(); 
      } 
      this.remove(); 
     }, 

     edit: function(e) { 
     var attribute = {}; 

     attribute[e.currentTarget.name] = e.currentTarget.value; 
     this.model.set(attribute); 
    }, 

    }); 

    })(); 

也許做法是錯誤的，我在錯誤的軌道上

Answer 1

您應該檢查自定義區域的方式，由布賴恩·曼在backbonerails.com

這樣的想法是以下幾點：

1）定義在類特殊您的應用程序的區域，讓我們把它叫做DialogRegion

regions: { 
    dialogs: { 
     selector: '#dialogs', 
     regionClass: DialogRegion 
    } 
} 

2）擴展DialogRegion像以下。我用引導模式API，請期待

var DialogRegion = Marionette.Region.extend({ 
    onShow: function(view) { 
     view.$el.addClass('modal'); 
     view.$el.modal(); 

     // add handler to close popup via event 
     view.on('before:destroy', function() { 
      view.$el.modal('hide'); 
     }); 

     //destroy view on popup close 
     view.$el.on('hidden.bs.modal', function (e) { 
      view.destroy(); 
     }); 
    }) 
}) 

3）後來從您的應用程序的任何地方，你可以通過在dialogs應用區域渲染任何視圖渲染模態：

App.dialogs.show(new SomeSuperView({ 
    model: model 
})) 

我建議你結帳教程在Backbonerails澄清這種方式。希望你會發現它有用