为什么这个骨干视图不能正确渲染？

我在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;

的DashboardView呈现完美的，但是当我创建了ProjectCardView，认为似乎没有初始化，因此模板是空的，EL未设置。如果我在初始化函数中设置了el，那么$ el仍然没有设置。我只是看不到我做错了什么。

编辑：看起来像我发现问题; $（'。list'）是第一个视图引入的元素，因此，第二个视图试图找到它时不会呈现 - 即使第一个视图已在DOM中呈现。

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

来源

2013-03-07 Stevo

您可以发布您的模板？ – nemesv 2013-03-07 20:43:05

我宁愿不 - 即使我删除模板，它仍然无法正确启动。 – Stevo 2013-03-07 20:44:16

没有看到你的html很难提供帮助...你可以尝试将你的ProjectCardView的el从'el：$（'。list'），''改为'el：'.list'，' – nemesv 2013-03-07 20:46:52

如果你指定你的el作为jQuery选择器$('.list')你应该知道它会在你的Backbone.View.extend执行时执行。所以，如果你的元素不在DOM中，那么你的选择器将不起作用。

因此，您需要在DOM中指定el。所以你的情况，你可以这样写：

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

或者你也可以使用骨干功能，您可以指定el作为jQuery选择的字符串istead：

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

来源

2013-03-07 21:02:23 nemesv

为什么这个骨干视图不能正确渲染？

回答

相关问题