CODEWITHSUNDEEP
javascriptjsonbindingsapui5model-binding
marissalianam
marissalianam

Reputation: 67

Clone sapUi5 json model and stop binding

I have seen a similar question, but in my case it doesn't work. I have a JSON model, called data, which corresponds to a SAPUi5 form with comboboxes. I want to copy the state of the model the first time I open my application and keep it like that. After that I want to use it to reset my form and bring the comboboxes back to their default values. When I first start my application:

this.getView().setModel(new JSONModel(data)); //create the original model

//copy the original model (copyModel is global variable
copyModel = $.extend({}, data);

Until here everything is fine. The two models are exactly the same. After that I have a button and a reset Function:

resetP: function(){

     this.getView().setModel(new JSONModel(copyModel));
     console.log(copyModel);
     }

The first time I select something in the comboboxes and click the reset button and run the reset function, the copymodel is the right one. Same with the original data model. When I change again the selected value of the combobx, the copyModel, starts taking the selected value. Somehow it's overwritten. I don't know what I am doing wrong. Are there any suggestions? I have also tried to use JSON.strignify instead of extend.

Upvotes: 1

Views: 1716

Answers (2)

SBIC
SBIC

Reputation: 45

We use jQuery.extend(true, {}, object_to_copy); in this way to create a "deep copy" from the object we want an independed copy from.

Upvotes: 1

Deepshikha Mohanta
Deepshikha Mohanta

Reputation: 588

JSON models be default have two way binding. So when you are triggering events like selectionChange on the ComboBox, because of two way binding, the set data to the model keeps getting updated. Also Javascript has objects by reference, so it is the original copyModel object that gets updated.

You can prevent this by setting a copy of the copyModel to the JSON model.

Another thing I would like to mention is that do not keep setting the model again and again. You can just update the data that is set to the model and update the model. This can be done in 2 ways.

a. 

resetP: function(){
                this.getView().getModel().setData(copyModel);
                console.log(copyModel);
            }

b. You could also update the required property and do a

this.getView().getModel().updateBindings();

Upvotes: 1

Related Questions