Backbone.js sync Collection - Coding

The Backbone.js sync Collection is the function that the collection calls every time attempts to request the server. When a collection begins a sync with the server, a request event is emitted. If the request completes successfully you’ll get a sync event and an error event if not.

Syntax:

collection.sync( method, model, options );

Parameters: It takes three parameters that are discussed below:

method: It is the CRUD method, which stands C for create, R for read, U for update, and D for delete.
collection: It is a collection which behalf of which a request to use is made.
options: It is success and error callbacks and other information.

Example 1: In this example, we will illustrate the Backbone.js sync Collection. Here we will fetch the data which will eventually call the sync function of collection.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS sync Collection</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.2.2/backbone-min.js" 
            type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> BackboneJS sync Collection </h3> 
  
    <script type="text/javascript"> 
  
        var geek = new Backbone.Collection({ 
            coll: 'car', 
            url: '/car', 
        }); 
  
        geek.sync = function (method, collection) { 
            document.write(`This is sync function which  
                is called for ${method} an collection ` + 
                JSON.stringify(collection), '<br>'); 
        }; 
        geek.fetch(); 
    </script> 
</body> 
  
</html>

Output:

Backbone.js sync collection

Example 2: In this example, we will make the user define save function to the collection which will sync with the server, and on success, it will print a success message and on error, it will print an error message.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS sync Collection</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.2.2/backbone-min.js"
        type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> BackboneJS sync Collection </h3> 
      
    <div id='1'></div> 
      
    <script type="text/javascript"> 
        var Book = Backbone.Model.extend(); 
        function SUC() { 
            document.getElementById('1').append 
                ("Demonstrating Success method of sync" 
                + " Collection Data Saved successfully")  
                        } 
        function ERR() { 
            document.getElementById('1'). 
                append('Demonstrating error method ' 
                    + 'of sync Collection Error!') 
        } 
  
        var Books = Backbone.Collection.extend({ 
            model: Book, 
            url: 'https://...com/posts/2', 
  
            save: function (method) { 
                Backbone.sync(method, this, 
                    { success: SUC, error: ERR }); 
            } 
        }); 
        var k = new Books(); 
        k.save('update'); 
    </script> 
</body> 
  
</html>

Output:

Backbone.js sync Collection

Reference: https://backbonejs.org/#Collection-sync

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
Backbone.js extend View
Why we cannot catch error outside of function in JavaScript ?
Command Line Flags by the Node Binary
Next.js Create Next App
Implement polyfill for String.prototype.trim() method in JavaScript

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13