子视图未呈现

Question

我必须使用 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;
    }
});

我的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());
    }

});

还有我的 PackServiceView :

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 设置为 "<%=packCode%>-includedServices"，以便在 DOM 中绑定它，但从我读到的内容来看不同的主题，我假设我的问题来自 DOM 附件问题。由于我有多个 PackView，我必须为每个 PackServicesView.

设置一个不同的 ID

一点 JSFiddle 重现了这个问题。

Answer 1

当您在 PackView.initialize() 中调用 $(this.innerEl) 时，该元素尚未添加到 DOM，对 this.render(); 的调用在几行之后。

我已经在此处更正了您的 JSFiddle：https://jsfiddle.net/uenut4te/

    this.render();

    // rendering includedServices using service view
    this.servicesView = new PackServicesView({                
        el : $(this.innerEl),
        collection : this.model.get('services'),
        packCode : this.model.get('packCode')
    });

我更改了顺序，以便 PackView 在实例化 PackServicesView 之前呈现。

子视图未呈现

Sub-view isn't rendered

javascript

backbone.js