Open In App

Backbone.js sync Collection

Improve
Improve
Like Article
Like
Save
Share
Report

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=
            type="text/javascript">
    </script>
    <script src=
            type="text/javascript">
    </script>
    <script src=
            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>
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        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



Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads