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= 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>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: "neveropen", title2: "A computer science portal for Geeks!!" }); var myModel_2 = new Backbone.Model({ name: "Model 2", title1: "neveropen", 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= </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <h3>Backbone.js - Sync Backbone.js sync</h3> <div id="mydiv"></div> <script type="text/javascript"> var myCol = new Backbone.Collection({ name: "neveropen", 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> |
Output:
Reference: https://backbonejs.org/#Sync
