我在我的应用程序中运行此代码,
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,则会呈现新视图。
我不能为我的生活解决正在发生的事情。