javascript - subview 未渲染

Question

我必须使用 Backbone.js，并且在渲染 subview 时遇到问题。

这是我的行为的快速描述。我有包含服务的软件包。我有一个观点:

• 包装 list
• 特定包
• 包内部的服务列表
• 特定服务

包和服务存储在集合中。

这是我的包 View :

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 调试时，我看到 render PackServiceview的功能正在正常渲染其模板。

我的包模板中有一个 div，其 id 设置为 "<%=packCode%>-includedServices"为了将其绑定(bind)到 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 之前呈现。