Этот код работает, но единственная проблема заключается в создании новой записи с использованием 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(); } }); })();