骨干事件对父母的看法

Question

我是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 

因为我是相当新的这个新的框架，必须有东西，我忘了补充或也许我错误地做事情。我希望从更多的用户经验中指出我的错误。有任何想法吗？

的index.html

<div class="container"> 
    <div id="content"> 
    </div> 
</div> <!-- /container --> 

的login.html

<div id="signin"> 
    <form action=""> 
    <fieldset> 
     <legend>Login</legend> 
     <input id="login" type="button" value="Login"> 
    </fieldset> 
    </form> 
</div> 

register.html

<ul> 
    <li id="login-li"><a id="showlogin">I already have an account</a></li> 
</ul> 
<div id="login-container"> 
</div> 

router.js

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'views/register' 

    ], function($, _, Backbone, registerView){ 
    var AppRouter = Backbone.Router.extend({ 

    routes: { 
     "register": "registerView" 
    }, 

    registerView: function() { 
     registerView.render(); 
    } 
    }); 

    return AppRouter; 
}); 

个login.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; 
}); 

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

Answer 1

您初始化loginView之前有id为#login-container DOM元素在DOM树（只加时registerView是呈现），所以自然，事情有点过时了。

，你能做些什么来纠正这种情况是不是在各自的模块返回每个视图的实例，这样return new xView，而是返回“类”这样的return xView，然后在需要这样

时对它们进行初始化

showLogin: function() { 
    (new loginView()).render(); 
}