我是 Backbone.js 的新手，到目前为止我很喜欢它，我一直在使用 Require.js 来模块化整个项目。到目前为止一切顺利，但我确实在事件绑定方面遇到了一些问题。
基本上我想要做的是，当你第一次进入注册页面时，路由器将呈现 registerView。在注册视图中，您将看到一个链接，稍后我将添加更多按钮，一旦我得到这个工作。
单击链接时，我会启动 showLogin 事件并调用 showLogin 函数，并将登录视图呈现到 div (#login-container) 中。由于某种原因我不能使用$(this.el).html(template(data));。但是我通过使用 jquery 选择器将视图加载到正确的 div 中来解决它。有人可以向我解释为什么$(this.el不起作用login.js吗？
现在的主要问题是，当有人单击登录按钮时，我想触发另一个事件。我以为我可以在 loginView(Login.js) 中触发该事件，但该事件是在父视图 (Register.js) 中触发的。当我单击按钮时，javascript 控制台将打印：
Register.js Login Clicked
由于我对这个新框架相当陌生，因此肯定有一些我忘记添加的东西，或者我做错了。我希望有更多经验的用户指出我的错误。有任何想法吗？
索引.html
<div class="container">
<div id="content">
</div>
</div> <!-- /container -->
登录.html
<div id="signin">
<form action="">
<fieldset>
<legend>Login</legend>
<input id="login" type="button" value="Login">
</fieldset>
</form>
</div>
注册.html
<ul>
<li id="login-li"><a id="showlogin">I already have an account</a></li>
</ul>
<div id="login-container">
</div>
路由器.js
define([
'jquery',
'underscore',
'backbone',
'views/register'
], function($, _, Backbone, registerView){
var AppRouter = Backbone.Router.extend({
routes: {
"register": "registerView"
},
registerView: function() {
registerView.render();
}
});
return AppRouter;
});
登录.js
define([
'jquery',
'underscore',
'backbone',
'text!templates/login.html'
], function($, _, Backbone, loginTemplate){
var loginView = Backbone.View.extend({
el: $("#login-container"),
initialize: function() {
_.bindAll(this, 'render'); // fixes loss of context for 'this' within methods
},
events: {
"click input#login": "login"
},
render: function(){
var data = {};
var template = Handlebars.compile(loginTemplate);
$("#login-container").html(template(data));
#
# Why the following code does not work like in register.js?
# $(this.el).html(template(data));
#
},
login: function() {
console.log("Login.js Login Clicked");
}
});
return new loginView;
});
注册.js
define([
'jquery',
'underscore',
'backbone',
'views/login',
'views/signup',
'text!templates/register.html'
], function($, _, Backbone, loginView, signupView, registerTemplate){
var registerView = Backbone.View.extend({
el: $("#content"),
initialize: function() {
_.bindAll(this, 'render');
},
events: {
"click a#showlogin": "showLogin",
"click input#login": "login",
},
render: function(){
var data = {};
var template = Handlebars.compile(registerTemplate);
$(this.el).html(template(data));
},
showLogin: function() {
loginView.render();
},
login: function() {
console.log("Register.js Login Clicked");
}
});
return new registerView;
});