为什么Backbone.js的不具约束力我的事件

我有一个这样的路由器，作为主要切入点：为什么Backbone.js的不具约束力我的事件

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

来源

2012-03-20 Saif Bechan

我想你可能会回答你自己的问题。看看这个例子http://documentcloud.github.com/backbone/examples/todos/index.html 他们使用“$（function（）{”这是文档就绪。 – 2012-03-20 23:05:09

好吧，我也试过这个，但是，什么部分的代码是在包装里准备的，包装路由器并不能解决问题，包装模型/集合/视图也没有效果。 – 2012-03-20 23:09:35

尽管它没有回答你的问题，但考虑绑定到提交事件在表单上（'submit＃login-form'）而不是链接上的点击事件，然后将链接更改为类型=“submit”的输入，这样可以通过键盘提交表单并单击按钮，你根本不需要改变loginAction – x1a4 2012-03-20 23:21:32

它不会从你张贴就像你分配一个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}); 
});

来源

2012-03-20 23:23:33 nrabinowitz

我试过了，我想，但我会再试一次，我以为它会把它绑定到身体默认，我见过som例如没有给出'el'属性的例子。 – 2012-03-20 23:27:19

Oeps，解决了它。多么愚蠢的错误，我认为我应该更好地看待这些例子。 – 2012-03-20 23:30:12

但它不一定要指定。如果不用，它将默认为一个div。 – PhillipKregg 2012-03-20 23:30:39

为什么Backbone.js的不具约束力我的事件

回答

相关问题