Backbone.js 为什么此主干视图渲染不正确？

我在backbone.js中有几个视图，我想成为另一个的孩子。因此，我创建了以下代码

var app = app || {} ;

app.ProjectCardView = Backbone.View.extend({

    el: $('.list'),

    template: _.template( $("#tpl-project-card-summary").html() ),


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

    render: function() {
        return this.$el.html( this.template() );

    }

});


app.DashboardView = Backbone.View.extend({

    el: $('.contentwrap'),

    template: _.template( $("#tpl-dashboard").html() ),

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

    render: function() {
        //console.log(this.template());
         this.$el.html( this.template() );

    },

    addProjects: function() {
        var pcv = new app.ProjectCardView();    
    }



});

app.dash = new app.DashboardView;

仪表板视图呈现得非常完美，但当我创建ProjectCardView时，视图似乎没有初始化，因此模板为空且el未设置。如果我在初始化函数中设置了el，那么$el仍然没有设置。我只是看不出我做错了什么

编辑：看起来我找到了问题；$'。list'是第一个视图引入的元素，因此，在第二个视图尝试查找它时，它不会被呈现—即使第一个视图已在DOM中呈现

---

那么我该如何解决这个问题呢

如果将el指定为jQuery选择器$'.list'，您应该知道它将在执行Backbone.View.extend时执行。因此，如果此时元素不在DOM中，那么选择器将无法工作

因此，您需要在el位于DOM中时指定它。因此，在你的情况下，你可以写：

addProjects: function() {
    var pcv = new app.ProjectCardView({ el: $('.list') });    
}

或者，您可以使用主干功能，将el指定为jQuery选择器的字符串istead：

app.ProjectCardView = Backbone.View.extend({    
    el: '.list',
    //...
}

---

如果将el指定为jQuery选择器$'.list'，您应该知道它将在执行Backbone.View.extend时执行。因此，如果此时元素不在DOM中，那么选择器将无法工作

因此，您需要在el位于DOM中时指定它。因此，在你的情况下，你可以写：

addProjects: function() {
    var pcv = new app.ProjectCardView({ el: $('.list') });    
}

或者，您可以使用主干功能，将el指定为jQuery选择器的字符串istead：

app.ProjectCardView = Backbone.View.extend({    
    el: '.list',
    //...
}

---

你可以发布你的模板吗？我不想-即使我删除了模板，它仍然不能正确启动。如果看不到你的html，很难帮助。。。您可以尝试将ProjectCardView的el从el:$'.list'更改为el:'.list'，@nemesv awesome-这完全修复了它！你可以发布你的模板吗？我不想-即使我删除了模板，它仍然不能正确启动。如果看不到你的html，很难帮助。。。您可以尝试将ProjectCardView的el从el:$'.list'更改为el:'.list'，@nemesv awesome-这完全修复了它！