Backbone Event在父视图上触发

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

在DOM树中存在标识为#login-container的DOM元素（仅在registerView 呈现时添加）之前初始化loginView，所以事情自然有点乱。

您可以采取哪些措施来纠正这种情况，不是像这个return new xView那样在各自的模块中返回每个视图的实例，而是像这样return xView返回'class'然后初始化它们在需要的时候像这样

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