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
});

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

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

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

1 个答案: