为什么Backbone.js不是't绑定我的活动

Why Backbone.js isn't binding my event

本文关键字：绑定 我的 活动 Backbone js 不是 为什么      更新时间：2023-09-26

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

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来自Node.js，使用express.js，我应该在某个地方等待文档就绪事件吗？

编辑：

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

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

从您发布的代码来看，它不像是在为UserLoginView实例分配el属性。我认为events散列无法绑定事件处理程序，除非视图具有el（即视图的根DOM元素，请参阅文档）。初始化视图时，它将处理程序绑定到根元素，对子元素使用.delegate()，因此没有根元素，也没有处理程序，即使使用基于id的选择器也是如此。试试这个：

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

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

$(function() {
    var appRouter = new AppRouter;
    Backbone.history.start({pushState: true});
});
相关文章：