Backbone.js Sync emulateHTTP

Last Updated : 25 Oct, 2022

Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If you’re not familiar with MVC, it’s essentially a method for creating user interfaces. 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.

Sync’s emulateHTTP is primarily used when the web server doesn’t support the default Backbone.js’s REST/HTTP approach. This is mainly useful in the case of using a legacy web server where you can keep the Backbone.emulateHTTP to true. The function of this method is to fake the basic HTTP requests like PUT, PATCH, and DELETE with a POST.

Syntax:

Backbone.emulateHTTP=true

Example 1: The code below demonstrates the status of the Model in the FETCH and SAVE requests.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <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 emulateHTTP</h3>
 
    <script type="text/javascript">
        Backbone.emulateHTTP = true;
        Backbone.emulateJSON = true;
        var newMod = new Backbone.Model({
            title: "GeeksforGeeks",
            about: "A computer science portal for Geeks!!"
        });
 
        Backbone.sync = function (method, model) {
            console.log("<br>"),
                console.log("The state of the Model:"),
                console.log("<br>"),
 
                console.log(method + ": " 
                    + JSON.stringify(model));
        };
        newMod.fetch()
        newMod.save();
    </script>
</body>
 
</html>

Output:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <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 emulateHTTP</h3>
 
    <script type="text/javascript">
        Backbone.emulateHTTP = true;
        Backbone.emulateJSON = true;
        Backbone.sync = function(method, model) {  
            console.log("<br>");
            console.log("<br>");
            console.log(method + ": " + JSON.stringify(model));  
            model.set('Content', "Informative Quality Articles");     
        };  
        var newMod = new Backbone.Model({  
            title: "GeeksforGeeks",
            about: "A computer science portal for Geeks!!" 
        });  
        newMod.fetch()
        newMod.save();  
        newMod.save({learn: "Data Structures and Algorithms" });  
    </script>
</body>
 
</html>