Backbone collection.add事件触发但不附加HTML

时间:2014-12-04 09:21:17

标签: javascript backbone.js backbone-views backbone-events

我在我的应用程序中运行此代码,

App.Views.OrganisationProjectsTab = Backbone.View.extend({

tagName: 'div',

attributes : function () {
    return {
        class: 'tab-pane',
        id : 'tab-' + this.model.cid + "-projects"
    };
},

template: _.template($('#tpl-projects-tab-panel').html()),

events : {
    "click .js-add-new-project" : "createNewProject",
    "click .js-assign-client" : "assignClient",
},

initialize: function() {
    App.Models.CurrentOrganisation = this.model;
    App.Models.CurrentOrganisation.get('projects').on('add', this.addOne, this);
},

render: function() {

    this.$el.append( this.template() );
    this.addAll();

    return this;
},

addAll: function() {
    this.model.get('projects').each(this.addOne, this);
},

addOne: function(model) {
    console.log('adding one');
    var tableRow = new App.Views.OrganisationsProjectRow({
        model: model
    });

    //$('body').append(tableRow.render().el);
    this.$('tbody').prepend(tableRow.render().el);
},

createNewProject: function(e) {
    e.preventDefault();
    $('.js-create-new-project').trigger("click");
},

assignClient: function(e) {

    e.preventDefault();
    var element = $(e.currentTarget);

    element.hide();

    var clientDropDown = new Pops.Views.ClientDropdown({
        collection: this.model.get('clients')
    });

    element.parent().append( clientDropDown.render().el );

}

});

addOne调用的视图如下所示,

App.Views.OrganisationsProjectRow = Backbone.View.extend({

tagName: 'tr',

className: 'menu-entry',

template: _.template( $('#tpl-organisation-project-row').html() ),

events: {
    "change select" : "saveClient"
},

initialize: function(options) {
    this.options = options;
    this.model.on('change', this.render, this);

},

render: function() {
    console.log(this.model.toJSON());
    this.$el.html( this.template( {
        project: this.model.toJSON(),
        hide_client: this.options.hide_client
    }));

    return this;
},

saveClient: function(e) {
    var self = this;
    console.log(this.model.get('clients'));
    //this.model.get('clients').remove();
    var client = new App.Models.Client({ id : $(e.currentTarget).val() });
    client.fetch({ 
        success:function() {
            self.model.set('clients', client)
            self.model.save({ client_id : $(e.currentTarget).val() });
        }
    });
}

});

我的问题是在App.Views.OrganisationProjectsTab中触发了add事件,但新视图没有呈现给tbody,但tbody确实存在于视图中。奇怪的是,如果我附加到body而不是tbody,则会呈现新视图。

我不能为我的生活解决正在发生的事情。

0 个答案:

没有答案