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进行调试时，我发现render的{{1}}函数正在使其模板正常。

我的包模板中有一个div，id设置为PackServiceview以便在DOM中绑定它，但是从我在不同主题中读到的内容，我认为我的问题来自于DOM附件问题。由于我有多个"<%=packCode%>-includedServices"，我必须在每个PackView上设置一个不同的ID。

重现问题的JSFiddle。

Answer 1

当您在$(this.innerEl)中调用PackView.initialize()时，该元素尚未添加到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之前呈现。

不呈现子视图

1 个答案: