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.
<!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.
<!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>
