Question

我正在建立一个模态弹出窗口，将Backbone Marionette项目视图插入基础揭示模式。模态出现但没有事件触发。具体来说，我正试图抓住点击事件。

我从Marionette布局视图加载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模式阻塞到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>

我认为其中任何一项都会有所帮助：

Boilerplate示例显示了如何使用骨干项目实施Zurb Foundation，特别是在您将骨干视图阻塞到基础模式的位置？
视图没有听到点击事件的任何一般原因？
我是否错误地将视图加载到该区域？

当我点击带有class =“me”或id =“join”的元素时，会发生错误。这两个都应该调用onJoin（），但两者都没有。

Answer 1

事件没有被触发，因为基础会创建一个新的DOM元素来保存模态，这个元素在ItemView的实例el之外，并且你可能知道Backbone只将事件委托给与之相关的元素。视图。

Backbone Marionette活动，Zurb Foundation的Reveal Modals

1 个答案: