为什么 Backbone.js 没有绑定我的事件

Question

我有一个这样的路由器，作为主要入口点：

window.AppRouter = Backbone.Router.extend({
    routes: {
        '': 'login'
    },
    login: function(){

        userLoginView = new UserLoginView();
    }
});

var appRouter = new AppRouter;
Backbone.history.start({pushState: true});

我有一个这样的模型/集合/视图：

window.User = Backbone.Model.extend({});

window.Users = Backbone.Collection.extend({
    model: User
});

window.UserLoginView = Backbone.View.extend({

    events: {
        'click #login-button': 'loginAction'
    },

    initialize: function(){
        _.bindAll(this, 'render', 'loginAction');
    },

    loginAction: function(){
        var uid = $("#login-username").val();
        var pwd = $("#login-password").val();

        var user = new User({uid:uid, pwd:pwd});
    }
});

我的 HTML 正文如下所示：

<form action="#" method="POST" id="login-form">
    <p>
        <label for="login-username">username</label>
        <input type="text" id="login-username" autofocus />
    </p>
    <p>
        <label for="login-password">password</label>
        <input type="password" id="login-password" />
    </p>
    <a id="login-button" href="#">Inloggen</a>
</form>

注意： HTML 来自使用 express.js 的 Node.js，我是否应该在某处等待文档就绪事件？

编辑：

我试过这个，准备好后创建视图，没有解决问题。

    $(function(){
        userLoginView = new UserLoginView();
    });

Answer 1

从您发布的代码来看，它不像您将 el 属性分配给 UserLoginView 实例。我不认为events 哈希将用于绑定事件处理程序，除非视图具有el（即视图的根DOM 元素-see docs）。当您初始化视图时，它将处理程序绑定到根元素，对子元素使用.delegate()，因此没有根元素，没有处理程序，即使使用基于 id 的选择器。试试这个：

window.UserLoginView = Backbone.View.extend({
    el: '#login-form',
    // etc
});

请注意，正如 cmets 中所讨论的，您应该在 DOM 准备好之后执行此操作。这里的标准方法是在$(document).ready 中启动路由器和历史机制：

$(function() {
    var appRouter = new AppRouter;
    Backbone.history.start({pushState: true});
});