CODEWITHSUNDEEP
c#javascriptbackbone.js
8GB
8GB

Reputation: 79

How to implement page refresh (fetch data from server and losing all changes made) functionality in backbone.js?

I am using two views, one original view to show the entire list of items (currently it shows 3 person's details) and another view is the modal dialog to add a new item to the collection. When I click add in the modal dialog, the new time will populate in the Original view. But I have a button "CancelChanges" in the page and when I click that the Original View must only show the items that were fetched from severe and lose all changes made later. Is there a way I can do that. When I tried to call my Original View ,the page shows a total of 7 person's details. Original 3 items that were fetched from server + the newly added item from modal dialog and it appended 3 original items to that list.Can anyone let me know how to xclear the initial list from the el?

Upvotes: 0

Views: 104

Answers (1)

Ingro
Ingro

Reputation: 2841

The simplest way that come in my mind would be to save your initial models data and then restore them when you click your "Cancel changes" button and re-render your view, something like that:

Backbone.View.extend({

initialize: function(){
    _.bindAll(this,'restore_collection');
    this.collection.bind('reset',this.render);
    this.originalModels = this.collection.models;    
},

events: {   
    "click #cancel" : "restore_collection"   
},

restore_collection: function(){   
    this.collection.reset(this.originalModels);    
}

Upvotes: 1

Related Questions