Events 主干事件在父'上触发；s观点

我是Backbone.js的新手，到目前为止我很喜欢它，我一直在使用Require.js来模块化整个项目。到目前为止还不错，但我确实在事件绑定方面遇到了一些问题

基本上就是我要做的，当您第一次进入注册页面时，路由器将呈现registerView。在register视图中，您将看到一个链接，我将在稍后添加更多按钮，一旦这个按钮开始工作

单击链接时，我启动showLogin事件并调用showLogin函数，并将登录视图呈现到div（#login container）中。我不能使用

$（this.el）.html（模板（数据））出于某种原因。但是我通过使用jquery选择器将视图加载到正确的div中来解决这个问题。有人能解释一下为什么
$（this.el
在
login.js
中不起作用吗

现在主要的问题是，当有人单击Login按钮时，我想触发另一个事件。我本以为可以在loginView（Login.js）中触发该事件，但该事件是在父视图（Register.js）中触发的。当我单击该按钮时，javascript控制台将打印：

Register.js Login Clicked

由于我对这个新框架还相当陌生，所以一定有什么东西我忘了添加，或者我做得不对。我希望更多的经验用户能指出我的错误。有什么想法吗

index.html
login.js
register.js
在DOM树中出现id为
#login container
（仅在呈现registerView时添加）的DOM元素之前，您需要初始化loginView，因此事情自然会有点混乱

要纠正这种情况，您可以做的不是像下面这样返回各自模块中每个视图的实例
返回新的xView
，而是像下面这样返回“类”
返回xView
，然后在需要时像这样初始化它们

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

我尝试了你的建议，但没有任何区别。将
el:$（“#登录容器”）
更改为
el:“#登录容器”
。el变量不适用于jQuery对象，它有一个单独的
$el
，但你不应该自己设置。是的，最后。非常感谢。
<div id="signin">  
  <form action="">
    <fieldset>
      <legend>Login</legend>
      <input id="login" type="button" value="Login">
    </fieldset>
  </form>
</div>

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

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

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

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

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

  return AppRouter;
});

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

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

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