Магистральное событие стреляет по родительскому представлению

Question

Я новичок в Backbone.js Я люблю его до сих пор, я использовал Require.js для модулизации всего проекта. Пока все хорошо, но я сталкиваюсь с некоторыми икотами с привязкой события.

В основном, что я пытаюсь сделать, когда вы впервые заходите на страницу регистрации, маршрутизатор отобразит registerView. Внутри Register View вам будет представлена ​​ссылка, я добавлю несколько кнопок позже, как только я заставлю это работать.

При щелчке по ссылке я запускаю событие 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 до того, как DOM-элемент с идентификатором #login-container (добавляется только тогда, когда это registerView оказывается) в дереве DOM, так Естественно, вещи идут немного смутно.

Что вы можете сделать, чтобы исправить эту ситуацию не возвращать экземпляр каждого вида в их соответствующих модулей, как этот return new xView, но вместо того, чтобы вернуть «класс», как этот return xView, а затем инициализировать их при необходимости как этот

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