Backbone.js url Model

Last Updated : 12 Dec, 2022

The Backbone.js url Model is a function that is used to get the relative url where the model’s resource would be located on the server. If the model is located somewhere else, override this method with the correct logic to get the model. General URLs are of the form of [ Collection.url]/[id]’ but we can override this by specifying urlRoot if the Model wants a separate URL.

Syntax:

model.url() ;

Parameters: It does not take any parameters.

Example 1: In this example, we will illustrate The Backbone.js url Model. In this example, we get the relative url of the Model which is part of the Collection. Here url would be the General form.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>BackboneJS url Model</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.2.2/backbone-min.js"
        type="text/javascript">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>BackboneJS url Model</h3>
     
    <script type="text/javascript">
        var Person = Backbone.Model.extend();
        var collection = Backbone.Collection.extend({
            model: Person,
            url: '/book/author'
        });
 
        // Creating instance of collection;
        var Coll_Person = new collection();
 
        // Adding model to collection
        var person = new Person();
        Coll_Person.add(person)
        document.write(`Resource for the Model is 
            reside at : <b> ${person.url()} </b> `);
    </script>
</body>
 
</html>

Output:

Backbone.js url Model

Example 2: In this example, we will override the general form of url with the urlRoot property of the Model and id attribute of the model.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>BackboneJS url Model</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.2.2/backbone-min.js"
        type="text/javascript">
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>BackboneJS url Model</h3>
    <script type="text/javascript">
        var Person = Backbone.Model.extend({
            urlRoot:
                'https://...com/posts/1/comments'
        });
 
        // The instance with id attributes
        var person = new Person();
        document.write(`Overriding the url of Model 
            with urlRoot : <b> ${person.url()} </b><br> `);
         
        // If we set id attribute
        person.set('id', 10);
        document.write(`Overriding the url of Model with 
            urlRoot and id : <b> ${person.url()} </b> `);
    </script>
</body>
 
</html>