Backbone Marionette事件，Zurb基金會的揭示模式

Question

我正在通過將Backbone Marionette項目視圖干擾到基金會揭示模式來構建模式彈出窗口。模態出現，但沒有事件發生。具體來說，我試圖抓住一個點擊事件。

我從木偶版面視圖中加載基礎。

'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模式阻塞到Modal區域。然後它重新初始化基礎。

'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> 

我敢打賭任何這些將是有益的：

• 樣板例子說明如何用骨幹工程實施Zurb基金會，具體在哪裏，你」將干擾視圖鎖定爲基礎模態？
• 視圖聽不到點擊事件的一般原因？
• 我不正確地將視圖加載到該區域嗎？

當我單擊class =「me」或id =「join」的元素時，會發生該錯誤。這兩個都應該調用onJoin（），但都不要。

Answer 1

事件不會被觸發，因爲基礎會創建一個新的DOM元素來存放模式，這個元素不在您的ItemView的實例的el之中，而且您可能知道Backbone只會將事件委託給與該視圖關聯的元素。