嵌套 Backbone 视图未添加到 DOM

Question

我是 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);
},

Answer 1

您的导航视图在分离的 DOM 节点上工作，这意味着您的登录视图无法找到 #login，因此无法填充。

将您的容器作为 el 参数传递给您的主视图：

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

http://jsfiddle.net/nikoshr/L1wp4vds/ 演示

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

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

    ...
});

http://jsfiddle.net/nikoshr/L1wp4vds/1/

嵌套 Backbone 视图未添加到 DOM

Nested Backbone Views Not adding to the DOM

javascript

templates

views

backbone.js