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只会将事件委托给与该视图关联的元素。