After Adding a record it is not displaying the data immediately to the view

三世轮回 提交于 2019-12-25 03:58:18

问题


When I loads the page , it is getting all the datas and I am displaying the datas. But When I add a record, that is I am submitting the form "addcontact", the datas are creating in the database. But It is not adding into the collection and that this.collection.on('add') is not getting triggered. So, I think the problem was because of this. Can any one tell me that where I am doing wrong? Is there any other way to solve this.

This code works functionally, but the only problem with this is , on creating new record using this.collection.create({new post},{wait: true}); the values are getting updated in the database. But it is not adding into the collection.

(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()  );
};

// Contact Model

App.Models.Contact = Backbone.Model.extend({
    validate: function(attrs) {
        if( !attrs.first_name || 
            !attrs.last_name  || 
            !attrs.email_address) {

            alert('Fill the missing fields');
        }
    }
});

// Collection

App.Collections.Contacts = Backbone.Collection.extend({
    model: App.Models.Contact,
url  : 'index.php/ContactsController/contacts'
});

// Global View

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);
}
 });

// Add Contact View

 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('');
}

});

// All Contacts Views

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);
}

});

// A view for a single View

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;
}
  });
})();

来源:https://stackoverflow.com/questions/21980729/after-adding-a-record-it-is-not-displaying-the-data-immediately-to-the-view

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!