Backbone Marionette events, Zurb Foundation의 공개 모달

Backbone Marionette itemview를 Foundation Reveal 모달로 이동하여 모달 팝업을 구축하고 있습니다. 모달은 나타나지만 이벤트는 발생하지 않습니다. 특히 클릭 이벤트를 잡으려고합니다.Backbone Marionette events, Zurb Foundation의 공개 모달

마리오 넷 레이아웃보기에서 Foundation을로드합니다.

'use strict'; 

    define([ 
     'jquery', 
     'underscore', 
     'backbone', 
     'region/actionbar', 
     'region/modal', 
     'text!/js/template/global.ejs', 
     'js/views/actionbar/actionbar.js', 
     'less!/style/global.less', 
     'css!/js/bower_components/foundation/css/foundation.css', 
     '/js/bower_components/foundation/js/foundation/foundation.js', 
     '/js/bower_components/foundation/js/foundation/foundation.reveal.js', 
     'marionette' 
    ], function ($, _, Backbone, ActionBar, Modal, Template, ActionBarView) { 

     var GlobalLayout = Backbone.Marionette.Layout.extend({ 
      template: _.template(Template), 

      el: 'body', 

      regions: { 
       content: "#content", 
       actionBar: ActionBar, 
       modal: '#modal' 
      }, 

      initialize: function(){ 
      }, 

      onRender: function(){ 
       // Load foundation 
       $(document).foundation(); 
      }, 

      title: function(title) { 
       // this.actionbar.title(title); 
       // document.title = "Workbench :: " + title; 
      } 
     }); 

     var layout = new GlobalLayout(); 
     layout.render(); 


     return layout; 
    });

팝업은 작업 표시 줄 영역의보기에서 클릭 이벤트에서로드되고 있습니다. Region :

'use strict'; 

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'marionette' 
], function ($, _, Backbone) { 

    var ActionBar = Backbone.Marionette.Region.extend({ 
     el: "#action-bar" 

    }); 

    return ActionBar; 

});

... 여기에 해당 지역의보기가 있습니다. onSignUp() 내 SignUp 모달을 모달 영역으로 막습니다. 그런 다음 재단을 다시 초기화합니다.

'use strict'; 

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'layout/global', 
    '/js/views/modals/sign-up.js', 
    '/js/views/modals/sign-in.js', 
    'model/user', 
    'text!/js/template/actionbar/actionbar.ejs', 
    'less!/style/global.less', 
    'marionette' 
], function ($, _, Backbone, layout, SignUp_Modal, SignIn_Modal, User, Template) { 

    var ActionBarView = Backbone.Marionette.ItemView.extend({ 

     initialize: function(){ 
      this.setElement('#action-bar'); 
     }, 

     template: _.template(Template), 

     events: { 
      "click .sign-in" : "onSignIn", 
      "click .sign-up" : "onSignUp" 
     }, 

     onSignUp: function(e){ 
      // e.preventDefault(); 

      layout.modal.show(new SignUp_Modal()); 
      $(document).foundation(); 

     }, 

     onSignIn: function(e){ 
      // Prevent the link from doing anything. 
      e.preventDefault(); 

      // Load modal popup that requests user to sign in  
      layout.modal.show(new SignIn_Modal()); 
      $(document).foundation(); 
     } 

    }); 

    return ActionBarView; 
});

마지막으로, 여기 내 SignUp_Modal보기 및 해당 템플릿이 있습니다.

'use strict';

define([ 
    'jquery', 
    'underscore', 
    'model/user', 
    'text!/js/template/modals/sign-up.ejs', 
    'marionette' 
], function ($, _, User, Template){ 
    var Modal = Backbone.Marionette.ItemView.extend({ 

     events: { 
      'click #join': 'onJoin', 
      'click .me': 'onJoin' 
     }, 

     template: _.template(Template), 

     onJoin: function(e){ 
      // Check whether the click events do anything 
      console.log('Heard it'); 
     } 

    }); 

    return Modal; 
});

템플릿 : 나는 이들의 도움이 될 것이라고 장담

<div id="signUp" class="reveal-modal" data-reveal> 
    <form> 
     <div class="row"> 
     <div class="small-8"> 
      <div class="row"> 
      <div class="small-3 columns"> 
       <label for="email" class="right inline">Email</label> 
      </div> 
      <div class="small-9 columns"> 
       <input type="text" id="email" placeholder="Email"> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="small-3 columns"> 
       <label for="phone" class="right inline">Phone</label> 
      </div> 
      <div class="small-9 columns"> 
       <input type="text" id="phone" placeholder="Phone"> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="small-3 columns"> 
       <label for="pass" class="right inline">Password</label> 
      </div> 
      <div class="small-9 columns"> 
       <input type="password" id="pass"> 
      </div> 
      </div> 
      <div class="row"> 
       <label>Username will be...</label> 
       <input type="radio" name="username" value="email" id="username_email" checked><label for="username_email">Email</label> 
       <input type="radio" name="username" value="phone" id="username_phone"><label for="username_phone">Phone</label> 
      </div> 
      <div class="row"> 
      <div class="small-3 columns"> 
       <a href="#" class="button postfix" id="join">Join</a> 
      </div> 
      </div> 
     </div> 
     </div> 
    </form> 
      <div class="me">blaaaa</div> 
    <a class="close-reveal-modal">&#215;</a> 
</div>