Why Backbone.js isn't binding my event
- by Saif Bechan
I have a router like this, as main entry point:
window.AppRouter = Backbone.Router.extend({
routes: {
'': 'login'
},
login: function(){
userLoginView = new UserLoginView();
}
});
var appRouter = new AppRouter;
Backbone.history.start({pushState: true});
I have a model/collection/view like this:
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});
}
});
And body of my HTML looks like this:
<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>
Note: The HTML comes from Node.js using express.js, should I maybe wait for a document ready event somewhere?
Edit:
I have tried this, create the view when ready, did not solve the problem.
$(function(){
userLoginView = new UserLoginView();
});
