嵌套的主干视图未添加到 DOM答案

【问题标题】：Nested Backbone Views Not adding to the DOM嵌套的主干视图未添加到 DOM
【发布时间】：2015-04-26 19:16:39
【问题描述】：

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

【问题讨论】：

您能否提供有关如何启动 elm.views.Navigation 的更多详细信息？ Backbone 使用 JQUERY 并在页面周围寻找元素，因此如何启动第一个视图很重要。 https://github.com/jashkenas/backbone/blob/master/backbone.js
如何将导航附加到 DOM？
@NimaShahri 请参阅上面已编辑的问题。

标签： javascript templates backbone.js views

【解决方案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/

【讨论】：