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;"> neveropen </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;"> neveropen </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
