此代码有效,但唯一的问题是,在使用this.collection.create({new post},{wait: true})
创建新记录时,值会在数据库中更新。但它没有将它添加到集合中。
我将完整的客户端代码放在此处。我也在使用Codegniter Framework进行数据库集成。
(function(){
Backbone.emulateHTTP = true;
//Backbone.emulateJSON = true;
window.App = {
Models:{},
Collections: {},
Views: {},
Router: {}
};
window.vent = _.extend({},Backbone.Events);
window.template = function(id){
return _.template( $('#'+id).html() );
};
//模型
App.Models.Contact = Backbone.Model.extend({
validate: function(attrs){
if( !attrs.first_name || !attrs.last_name || !attrs.email_address){
alert('Fill the missing fields');
}
}
});
//收集
App.Collections.Contacts = Backbone.Collection.extend({
model: App.Models.Contact,
url: 'index.php/ContactsController/contacts'
});
//观看次数
App.Views.App = Backbone.View.extend({
initialize: function(){
vent.on('contact:edit',this.editContact,this);
//console.log(this.collection.toJSON());
App.addContactView = new App.Views.AddContact({collection: App.Contacts});
App.allContactsView = new App.Views.Contacts({collection: App.Contacts});
$('#allcontacts').append(App.allContactsView.el);
},
editContact: function(contact){
var editContact = new App.Views.EditContactView({model: contact});
console.log(editContact.el);
$('#editContactdiv').html(editContact.el);
}
});
App.Views.AddContact = Backbone.View.extend({
el: '#addcontact',
initialize: function(){
this.first_name = $('#first_name'),
this.last_name = $('#last_name'),
this.email_address = $('#email_address'),
this.description = $('#description')
},
events: {
'submit' : 'addContact'
},
addContact: function(e){
e.preventDefault();
this.collection.create({
first_name: this.first_name.val(), // <===== same as $this.el.find('#first_name')
last_name: this.last_name.val(),
email_address: this.email_address.val(),
description: this.description.val()
},{wait: true});
this.clearForm();
},
clearForm: function(){
this.first_name.val('');
this.last_name.val('');
this.email_address.val('');
this.description.val('');
}
});
//编辑联系人视图
App.Views.EditContactView = Backbone.View.extend({
template: template('editContactTemplate'),
initialize: function(){
this.render();
this.form = this.$('form');
this.first_name = this.form.find('#edit_first_name');
this.last_name = this.form.find('#edit_last_name');
this.email_address = this.form.find('#edit_email_address');
this.description = this.form.find('#edit_description');
},
events:{
'submit form': 'submit',
'click button.cancel': 'cancel'
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
submit: function(e){
e.preventDefault();
this.model.save({
first_name: this.first_name.val(),
last_name: this.last_name.val(),
email_address: this.email_address.val(),
description: this.description.val()
});
this.remove();
},
cancel: function(){
this.remove();
}
});
//所有联系人视图
App.Views.Contacts = Backbone.View.extend({
tagName: 'tbody',
initialize: function(){
this.collection.on('add',this.addOne,this);
this.render();
},
render: function(){
this.collection.each(this.addOne,this);
//console.log(this.el);
return this;
},
addOne: function(contact){
var ContactView = new App.Views.Contact({model: contact})
//console.log(ContactView.render().el);
this.$el.append(ContactView.render().el);
}
});
//单个联系人的视图
App.Views.Contact = Backbone.View.extend({
tagName: 'tr',
template: template('allContactsTemplate'),
initialize: function(){
this.model.on('destroy',this.unrender,this);
this.model.on('change',this.render,this);
},
events: {
'click a.delete': 'deleteContact',
'click a.edit': 'editContact'
},
editContact: function(e){
e.preventDefault();
vent.trigger('contact:edit',this.model);
},
deleteContact: function(e){
e.preventDefault();
this.model.destroy();
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
unrender: function(){
this.remove();
}
});
})();