1

我在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 中呈现。

那么我该如何解决呢？

4

1 回答 1

5

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

所以你需要指定el它在 DOM 中的时间。所以在你的情况下你可以写：

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

或者您可以使用 Backbone 功能，您可以将其指定el为字符串而不是 jQuery 选择器：

app.ProjectCardView = Backbone.View.extend({    
    el: '.list',
    //...
}
于 2013-03-07T21:02:23.903 回答