Javascript 嵌套主干视图未添加到DOM

我不熟悉Backbone.js，很难显示嵌套视图。Login视图的render方法将激发，但不会向DOM中添加任何内容。它似乎没有从父视图中看到元素

elm.views.Navigation = Backbone.View.extend({

    render: function () {
        this.$el.html(this.template());
        new elm.views.Login({model: this.model, el: '#login'});
        return this;
    },

    events: {
        'mousedown li': 'mouseDown',
        'mouseup li': 'mouseUp',
        'click .btn-login': 'login'
    },

    mouseDown: function (e) {
        $(e.currentTarget).addClass('active');
    },

    mouseUp: function () {
        $('li').removeClass('active');
    },

    login: function () {
        $(document).trigger('login');
        return false;
    }

});

elm.views.Login = Backbone.View.extend({

    initialize: function() {
        this.render();
    },

    render: function () {
        console.log("login render");
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    events: {
        'click .login': 'login',
        'click .logout': 'logout'
    },

    login: function (e) {
        $(document).trigger('login');
        return false;
    },

    logout: function (e) {
        $(document).trigger('logout');
        return false;
    }

});

回复评论：

导航视图将从路由器的初始值设定项中显示：

initialize: function() {        
    elm.user = new elm.models.Person();
    elm.navigationView = new elm.views.Navigation({model: elm.user});
    $("#pageContent").html(elm.navigationView.render().el);
},

---

导航视图在分离的DOM节点上工作，这意味着登录视图找不到

#login

，因此无法填充

将容器作为

el

参数传递到主视图：

elm.navigationView = new elm.views.Navigation({
    model: elm.user, 
    el: "#pageContent"
});
navigationView.render();

elm.views.Navigation = Backbone.View.extend({
    render: function () {
        this.$el.html(this.template());
        new elm.views.Login({el: this.$('#login')});
        return this;
    }

    ...
});

演示

或将子元素的范围限定到主视图中使用的元素：

elm.navigationView = new elm.views.Navigation({
    model: elm.user, 
    el: "#pageContent"
});
navigationView.render();

elm.views.Navigation = Backbone.View.extend({
    render: function () {
        this.$el.html(this.template());
        new elm.views.Login({el: this.$('#login')});
        return this;
    }

    ...
});

---

能否提供有关如何启动elm.views.Navigation的更多详细信息？主干使用JQUERY并在页面周围查找元素，因此如何启动第一个视图非常重要。您是如何将导航添加到DOM的？@NimaShahri请参见上面编辑的问题。