javascript - Backbone点击事件未注册 - Thinbug

Backbone点击事件未注册

时间：2014-02-13 15:56:11

标签： javascript jquery backbone.js backbone-views backbone-events

首先，我是Backbone.js的新手。我尝试使用ajax调用登录，但我无法触发click事件。视图启动（控制台显示输出）。

我做错了什么？我甚至试过“点击.login__button”：“登录”，但这也不行。

代码

login.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//use.typekit.net/pcs7nul.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <link rel="stylesheet" href="/assets/css/app.css">
    <script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
</head>
<body class="body--login">
    <main class="login__main" role="main">
        <div class="login__box">
            {{{ Form::open(['route' => 'login', 'method' => 'POST','class' => 'login__form', 'novalidate' => 'novalidate', 'autocomplete' => 'off', 'autocapitalize' => 'off']) }}}
                {{{ Form::email('email', null, ['class' => 'login__input', 'placeholder' => 'Email Address']) }}}
                {{{ Form::password('password', ['class' => 'login__input', 'placeholder' => 'Password']) }}}
                {{{ Form::submit('Sign in', ['class' => 'button button--blue login__button']) }}}
                <p><small><a href="#?" class="login__forgotten">Dammit, what&#8216;s my password again?</small></a></p>
            {{{ Form::close() }}}
        </div>
    </main>
</body>
</html>

main.js

require.config({
    paths: {
        jquery: 'libs/jquery',
        backbone: 'libs/backbone',
        underscore: 'libs/underscore'
    },

    shim: {
        backbone: {
            deps: ['jquery','underscore'],
            exports: 'Backbone'
        }
    }
});

require(['app'], function(App){
    App.initialize();
});

app.js

define(['jquery', 'underscore', 'backbone', 'router',], function($, _, Backbone, Router){
  var initialize = function(){
    Router.initialize();
  };

  return {
    initialize: initialize
  };
});

router.js

define([
    'jquery',
    'underscore',
    'backbone',
    'views/login/login'
], function($, _, Backbone, LoginView){
    var AppRouter = Backbone.Router.extend({
        routes: {
            "login": "login",
            "*actions": "defaultRoute"
        }
    });

    var initialize = function(){
        var app_router = new AppRouter;

        app_router.on('route:login', function(actions) {
            var loginView = new LoginView();
        });

        app_router.on('route:defaultRoute', function(actions) {
            alert(actions);
        });

        Backbone.history.start({pushState: true});
    };

    return {
        initialize: initialize
    };
});

视图/登录/ login.js

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

    var LoginView = Backbone.View.extend({
        initialize: function () {
            console.log('Initializing Login View');
            this.render();
        },

        events: {
            'click': 'login'
        },

        login: function(event) {
            event.preventDefault();
            alert('hi');
        },

        render: function(){
            return this;
        }
    });

    return LoginView;
});

1 个答案:

答案 0 :(得分：1)

我发现骨干需要一个上下文，将el: $('.body--login')添加到视图中修复它。