Steps to temporarily turn off Backbone.sync for a fresh model and then reactivate it once the user clicks the save button

I am currently working with a Backbone collection model that consists of sub-models as elements, along with views to edit it.

My objective is to have the syncing functionality "turned off" initially when the model is created, so that the back end is not called upon until the user clicks on a specific button. Once that button is clicked, I want to "turn on" the sync and trigger the save method on the main model to store the data in the database. After the model has been saved, it should function like a regular model.

The main purpose behind this approach is to ensure that data is only saved when the user is satisfied with what has been entered.

javascriptbackbone.js

Answer №1

At first, Backbone searches for a model's local sync function before resorting to Backbone.sync.

Backbone.js Documentation: The sync function can be overridden globally as Backbone.sync, or on a more specific level, by adding a sync function to a Backbone collection or an individual model.

As a result, you have the ability to:

var MyModel = Backbone.Model.extend({
    // Instances of this model will now have a customized 'dud' sync function
    sync: function () { return false; }
});

var MyView = Backbone.View.extend({

   ...

   events : {
       'click #my-button' : 'enableSync',
       'click #my-save-button' : 'saveModel'
   },

   enableSync: function () {
       // If this view's model is still using our custom sync function,
       // we need to update it to use Backbone.sync from now on.
       if (this.model.sync !== Backbone.sync) {
          this.model.sync = Backbone.sync;
       }
   },

   saveModel: function () {
       // This action won't take effect until '#my-button' is clicked
       this.model.save();
   }

   ...

});

var view = new MyView({ model: new MyModel() });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing the presence of NaN?

Initially: https://i.stack.imgur.com/2n1Zk.png After Interaction: https://i.stack.imgur.com/Of0pO.png $(document).ready(function () { var output = document.getElementById("whole"); if (!navigator.geolocation) { ...

javascriptjquery

Using Typescript to iterate through an array of objects and modifying their keys using the forEach method

I have an object called 'task' in my code: const task = ref<Task>({ name: '', description: '', type: undefined, level: 'tactic', participants: undefined, stages: undefined, }); export interface Tas ...

javascripttypescriptvue.jsvuejs3vue-reactivity

The Nuxt.js landing page is having trouble loading, but all other components are functioning perfectly

I successfully created a blog using Nuxtjs and everything was working perfectly in development mode. However, when I deployed the application to my cPanel server, the landing page (index.vue) at showed an error message saying This page could not be found ...

javascriptvue.jsroutesnuxt.jsnuxtjs

The error message "Adyencheckout is not a constructor" is popping up in my

Struggling to implement the Adyen dropin payment UI in NextJS and facing issues initializing the Adyen dropin component. Attempting to dynamically import Adyen web to avoid window is not defined error, but uncertain on how to use it as a constructor after ...

javascriptreactjsnext.jsadyen

Swapping out 'useResult' in graphql for Vue and Apollo: A step-by-step guide

I need to replace the useResult function that is fetching data from GraphQL with a computed function. const locationOptions = useResult( result, [], ({ getLocations }): Option[] => formatOptions(getLocations) ) Instead, I want ...

javascripttypescriptvue.jsgraphqlapollo

Successfully Determining User Identity with Ajax Authentication

Currently, I am facing a security issue with my login page that uses an Ajax request for user authentication. The password entered by the user is sent as plain text in the form data of the Ajax request, making it vulnerable to interception by sniffing tool ...

javascriptphpjqueryajax

Assign local variable in Mongoose using query results

I created a function to query MongoDB for a credential (simplified): var query = Credential.findOne({token: token}); return query.exec(function (err, credential) { if (err) return null; return credential; }); The next step is to use this credent ...

javascriptnode.jsexpressmongoose

Could a personalized "exit page" confirmation be created?

I am looking for a solution that will allow me to pause the execution of my code, display a dialog box, and then resume execution only after a specific button is pressed. For example, if a user navigates from one page to another on my website, I want a di ...

javascriptangularjs

I am unable to utilize the backspace function within a text box generated by JavaScript

I have created a dynamic form using JavaScript that includes buttons and one text input field. However, the issue is that to delete the text entered in the input field, one must highlight the text and then type over it instead of being able to simply use t ...

javascripthtmlformsinput

Errors in JavaScript are displayed when a React application is built for production

I have developed a client react application using create-react-app. It communicates with a node server that runs an express api. During development, everything was smooth sailing and I was preparing for deployment. After running npm run build, there were ...

javascriptreactjsnpmdeploymentreact-scripts

Stopping a build programmatically in Next.js involves implementing specific steps that aim to halt

Is there a method to programmatically halt the execution of npm run build in Next.js when a specific Error occurs within the getStaticProps function? Simply throwing an Error does not seem to stop the build process. ...

javascripttypescriptnext.js

Error message: Unable to load image from local source in Vue application

I am currently working on creating a simple dice roll game in VueJs. However, I encountered an issue with using the dice images as it keeps giving me a 404 error. When I attempted to use require(), it stated that the function was not defined. After some t ...

javascriptvue.js

What could be preventing the webpack dev server from launching my express server?

Currently working on a straightforward web application using express and react. The front-end React bundle is being served via the express server. Everything runs smoothly with my start script, which builds the front-end code and launches the express serv ...

javascriptreactjsexpresswebpackwebpack-dev-server

How can I retrieve the ultimate value of a JQuery UI Slider and store it in a PHP variable?

I am looking to add 2 JQ UI Sliders to a single page on my PHP website. I need to capture the final values from both sliders (the last value when the user stops sliding) and store them in PHP variables for multiplication. How can I accomplish this task? I ...

javascriptphpjqueryvariablesslider

Activating gzip compression using fetch.js

I am utilizing fetch.js (https://github.com/github/fetch) to transmit a rather substantial JSON object to the backend. The size of the JSON is significant due to it containing an SVG image string. My question is whether fetch.js applies gzip compression a ...

javascriptjsongzipfetch-api

Encountering an issue of receiving "Undefined" while attempting to access constant data from a ReactJS file within my NodeJS

I am currently working on a file named check-rates that stores useStates() which are inputs provided by users. These inputs are essential for me to calculate and provide an estimated value for their shipment using the DHL API. In my nodejs express server, ...

javascriptnode.jsreactjsexpress

"Preventing the propagation of a click event on an anchor tag with

Is there a way to prevent the parent anchor from executing its href when a child element is clicked, despite using stopPropagation? Here is the markup provided: <div id="parent"> <h5>Parent</h5> <a id="childAnchor" href="https:// ...

javascriptjqueryhtml

Ensuring the correctness of environment variables in Next.js using Zod

After spending the entire day trying to figure it out, I realize that the solution may be simpler than expected. I am currently using the well-known zod library to validate my environment variables and transform data. However, I keep encountering a persis ...

javascripttypescriptnext.jsnext.js13zod

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

javascriptjqueryhtmlcss

Unable to populate an array with JSON elements within a for loop triggered by useEffect

In my code, there is an issue with the array candleRealTimeDataQueue not updating correctly. Below is the snippet of the problematic code: let candleCurrentJSONDataWS = null; var candleRealTimeDataQueue = []; let tempDateTime = null; let ca ...

javascriptreactjsnext.js