Create a duplicate of the sapUI5 JSON model and end the data binding process

Question

Create a duplicate of the sapUI5 JSON model and end the data binding process

I've encountered a similar issue, but the solution doesn't seem to work for me. I have a JSON model named "data" that represents a SAPUi5 form with comboboxes. My goal is to capture the initial state of the model when the application is first opened and preserve it. Then, I want to use this preserved state to reset the form and restore the comboboxes to their default values. At the beginning of my application:

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

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

Everything seems to be functioning correctly up to this point. Both models are identical. Next, I have a button triggering a reset function:

resetP: function(){

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

The first time I make a selection in the comboboxes, then click the reset button to run the reset function, the copyModel reflects the correct data. The same goes for the original data model. However, upon changing the selected value in the comboboxes again, the copyModel starts to adopt the new selection instead. It appears to be getting overwritten somehow. I'm unsure of what mistake I might be making here. Any suggestions? I also attempted using JSON.stringify instead of extend.

javascript json binding sapui5 model-binding

Answer 1

Answer №1

When working with JSON models, two-way binding is the default behavior. This means that when events like selectionChange are triggered on a ComboBox, the data in the model is continually updated. Since JavaScript uses objects by reference, it is the original copyModel object that gets updated.

To prevent this, you can set a copy of the copyModel to the JSON model.

Additionally, avoid repeatedly setting the entire model again and again. Instead, simply update the data within the model and then refresh the model itself. There are two ways to do this:

a.

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

b. Alternatively, you can update the required property and then call:

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

Answer 2

When working with JSON models, two-way binding is the default behavior. This means that when events like selectionChange are triggered on a ComboBox, the data in the model is continually updated. Since JavaScript uses objects by reference, it is the original copyModel object that gets updated.

To prevent this, you can set a copy of the copyModel to the JSON model.

Additionally, avoid repeatedly setting the entire model again and again. Instead, simply update the data within the model and then refresh the model itself. There are two ways to do this:

a.

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

b. Alternatively, you can update the required property and then call:

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

Answer 3

Answer №2

To achieve an independent copy of an object, we utilize

jQuery.extend(true, {}, object_to_copy);

in this manner to generate a "deep copy."

Answer 4

To achieve an independent copy of an object, we utilize

jQuery.extend(true, {}, object_to_copy);

in this manner to generate a "deep copy."

Create a duplicate of the sapUI5 JSON model and end the data binding process

Answer №1

Answer №2

Similar questions

Trouble seeing span in ion-item in Ionic 2: How can I display plain text instead?

Issue with bouncing dropdown menu

Tips for establishing a connection to a proxy server and executing an http.request through the proxy using nodejs

Retrieving specific data from nested arrays in Vue.js

What is the best way to extract the body content from a Markdown file that includes Frontmatter

Submitting the form with an extending controller results in an undefined state

Transitioning JS/CSS effects when the window is inactive

Variable not accessible in a Typescript forEach loop

Making an AJAX POST request using jQuery to send the current date and time to an ASP

What is the best way to display a Bootstrap alert above all other elements on the page?

The image is not appearing in my small AngularJS application

Unable to log out when the button is clicked

Tips on sending form data, including a file, to Ajax using the onclick() method

How can one overcome CORS policies to retrieve the title of a webpage using JavaScript?

Tips for directing the scroll according to the current selection class

Struggling with adding headers in React application

What are some ways to postpone the execution of a function in React or NextJs?

What is the best way to customize column width in AG-Grid?

Using Vue to fetch JSON data with Axios

Sending a POST request using PHP CURL with an empty value in the data