Javascript 子视图不是'；t渲染

我必须使用Backbone.js，我遇到了一个关于子视图渲染的问题

下面是我行为的简要描述。我有包含服务的软件包。我可以看到：

• 包裹清单
• 特定的包
• 包的内部服务列表
• 特定服务

包和服务存储在集合中

以下是我的包视图：

Backbone.View.extend({
    initialize : function() {

        this.mainView = this.options.mainView;
        this.innerEl = '#' + this.model.attributes.packCode + '-includedServices';
        // rendering includedServices using service view
        this.servicesView = new PackServicesView({                
            el : $(this.innerEl),
            mainView : this.mainView,
            collection : this.model.attributes.includedServices,
            packCode : this.model.attributes.packCode
        });

        // Compile template
        this.template = _.template(tmpl);

        /*--- binding ---*/
        _.bindAll(this, 'render');

        this.model.bind('change', this.render);

        /*---------------*/
        this.render();
    }, // initialize

    events : {
        'click input[type=checkbox]' : 'onCheck'
    },
    onCheck : function(event) {
        this.model.toggleSelected();
        this.mainView.setLastClickedPack(this.model);
    },
    render : function() {
        this.$el.html(this.template(this.model.toJSON()));

        this.$el.append(this.servicesView.render().el);

        return this.$el;
    }
});

My

PackServicesView

：

 Backbone.View.extend({
    //el: 'myIncludedServices',
    initialize: function() {
        this.mainView = this.options.mainView;
        this.collection.bind('reset', this.render, this);
        this.collection.bind('add', this.addPackService, this);
    },
    render: function() {
        this.$el.empty();
        this.collection.each(this.addPackService, this);
        return this.$el;
    },
    addPackService: function(item) {
        this.$el.append(new PackServiceView({
            model: item,
            mainView: this.mainView
        }).render());
    }

});

Backbone.View.extend({
    initialize: function() {

        this.mainView = this.options.mainView;
        //Compile template
        this.template = _.template(tmpl);
        //Création des sous vue
        this.model.set({
             defaultChoice: this.model.attributes.default
        });
        /*--- binding ---*/
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        /*---------------*/
        this.render();
    }, //initialize
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this.$el;
    },
    events: {
        'click input[type=checkbox]': 'clickEvent'
    },
    clickEvent: function(event) {
        this.model.toggleSelected();
    }
});

和我的

PackServiceView

：

 Backbone.View.extend({
    //el: 'myIncludedServices',
    initialize: function() {
        this.mainView = this.options.mainView;
        this.collection.bind('reset', this.render, this);
        this.collection.bind('add', this.addPackService, this);
    },
    render: function() {
        this.$el.empty();
        this.collection.each(this.addPackService, this);
        return this.$el;
    },
    addPackService: function(item) {
        this.$el.append(new PackServiceView({
            model: item,
            mainView: this.mainView
        }).render());
    }

});

Backbone.View.extend({
    initialize: function() {

        this.mainView = this.options.mainView;
        //Compile template
        this.template = _.template(tmpl);
        //Création des sous vue
        this.model.set({
             defaultChoice: this.model.attributes.default
        });
        /*--- binding ---*/
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        /*---------------*/
        this.render();
    }, //initialize
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this.$el;
    },
    events: {
        'click input[type=checkbox]': 'clickEvent'
    },
    clickEvent: function(event) {
        this.model.toggleSelected();
    }
});

在使用Firefox进行调试时，我看到

PackServiceview

的

render

功能可以很好地呈现其模板

我的包模板中有一个div，id设置为

“-includedServices”

，以便将其绑定到DOM中，但根据我在不同主题中阅读的内容，我假设我的问题来自DOM附件问题。由于我有多个

PackView

，我必须在每个

packserviceview

上设置一个不同的id

有一点重复了这个问题。

当您在

PackView.initialize（）中调用
$（this.innerEl）
时，元素尚未添加到DOM中，调用
this.render（）在几行之后

我已在此处更正了您的JSFIDLE：

我已更改了顺序，以便在实例化PackServicesView之前呈现PackView。
是否在包视图模板内有
'#'+this.model.attributes.packCode+'-includedServices'
。但不是在“顶层”，而是在另一个内部，为什么要清空PackServicesView.render中的el（this.$el.empty（））？它是一个ServicesView的复制/粘贴，它在包外呈现服务。我想目的是在我们更改显示的数据时从头开始重新填充列表