Backbone.js Sync Backbone.sync() Function

Last Updated : 04 Aug, 2022

Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If MVC isn’t familiar to you, it merely denotes a method of user interface design. JavaScript functions make it much simpler to create a program’s user interface. Models, views, events, routers, and collections are among the building blocks offered by BackboneJS to help developers create client-side web applications.

Backbone.js Sync is the method that is called Backbone.js to read or save a model to the server. It is utilized to show the model’s current status(which CRUD method is being performed).

Syntax:

sync(method, model, options)

Parameters:

method: It represents the CRUD operations like create, read, update and delete.
model: It represents the model which will be saved or the collection which will be read.
options: It provides the feedback message on whether the method succeeded or not.

Example 1: The code below demonstrates how we can read or create a model and see the method using Sync.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js - Sync Backbone.js sync</title> 
    <script src= 
"https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
            type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>Backbone.js - Sync Backbone.js sync</h3> 
    <div id="mydiv"></div> 
  
    <script type="text/javascript"> 
        var myModel_1 = new Backbone.Model({ 
            name: "Model 1", 
            title1: "GeeksforGeeks", 
            title2: "A computer science portal for Geeks!!" 
        }); 
        var myModel_2 = new Backbone.Model({ 
            name: "Model 2", 
            title1: "GeeksforGeeks", 
            title2: "We provide quality Articles!!" 
        }); 
  
        Backbone.sync = function (method, model) { 
            document.write("The state of the "  
                       + model.get('name') + ":"); 
            document.write("<br>"); 
  
            document.write(method + ": "  
                       + model.get('title1')  
                       + model.get('title2')); 
  
            document.write("<br>"); 
        }; 
  
        myModel_1.save(); 
        myModel_2.fetch(); 
    </script> 
</body> 
  
</html>

Output:

Example 2: The code below demonstrates how we can read a collection and see the method using Sync.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js - Sync Backbone.js sync</title> 
    <script src= 
 "https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"> 
    </script> 
    <script src= 
 "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript"> 
    </script> 
    <script src= 
 "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
            type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>Backbone.js - Sync Backbone.js sync</h3> 
    <div id="mydiv"></div> 
  
    <script type="text/javascript"> 
        var myCol = new Backbone.Collection({ 
            name: "GeeksforGeeks", 
            title: "A computer science portal for Geeks!!" 
        }); 
  
        Backbone.sync = function (method, model) { 
            document.write("The state of the Collection:"); 
            document.write("<br>"); 
  
            document.write(method + ": "  
                       + JSON.stringify(model)); 
        }; 
  
        myCol.fetch();   
    </script> 
</body> 
  
</html>