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

Question

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.

javascript backbone.js

Answer 1

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

Answer 2

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

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

Answer №1

Similar questions

JavaScript throws an error when attempting to access an object's methods and attributes

Should I use "npm install" or "sudo npm install -g"

What could be causing my JQuery code to fail after loading data via ajax?

Using jQuery's ajax function to send data with a variable name of data field

Encountering issues with extension CLI - "Unable to utilize the import statement outside a module"

Implementing a jQuery change event to filter a specific table is resulting in filtering every table displayed on the page

Combining user input data using JavaScript and Vue.js

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Is there a way to assign the chosen option from a dropdown list to an input field in Vue 3?

Reactjs implemented with Material UI and redux form framework, featuring a password toggle functionality without relying on hooks

What are the steps to integrate Webpack into an EJS Reactjs Express MongoDb application?

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

Discovering the correct location within a complex JSON or array to perform updates using JavaScript (either AngularJS or vanilla JavaScript

Encountering issues while attempting to execute node-sass using npm

An issue occurred during the hydration process, causing the entire root to switch to client rendering since the error occurred outside of a Suspense boundary

Encountering difficulties in accessing files displayed by serve-index in Express

Javascript Solution for Testing Palindromes in a Linked List

Updating a class within an AngularJS directive: A step-by-step guide

Navigating the Path: Strategies for Caching Server-side Rendering in Next Js

How to automatically select the first item in a populated dropdown list using Vue JS