Когда я загружаю страницу, она получает все данные, и я показываю данные. Но когда я добавляю запись, я представляю форму «addcontact», данные которой создаются в базе данных. Но он не добавляется в коллекцию и что this.collection.on ('add') не запускается. Поэтому я думаю, что проблема была из-за этого. Может ли кто-нибудь сказать мне, что я делаю неправильно? Есть ли другой способ решить эту проблему.
Этот код работает функционально, но единственная проблема заключается в создании новой записи с использованием this.collection.create ({new post}, {wait: true}); значения обновляются в базе данных. Но это не добавление в коллекцию.
(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); } });
// Добавить контакт
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'); //this will fix it this.collection.on("change", this.render , this); }, 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.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('change',this.render,this); }, render: function(){ this.$el.html(this.template(this.model.toJSON())); return this; } }); })();