Backbone.js url Collection

Last Updated : 25 Jul, 2022

The Backbone.js url Collection is the property or function of a collection which is the reference to the location where the data in the server is located. The url property of collection is used by all the models of collection to construct the url to fetch the data.

Syntax:

collection.url 
or
collection.url( ) ;

Properties: It doesn’t take any arguments.

Example 1: In this example, we will illustrate the Backbone.js url collection. We will use url link to fetch the data for collection.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS url collection</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 collection</h3> 
    <script type="text/javascript"> 
        var post = Backbone.Model.extend(); 
        var collection = Backbone.Collection.extend({ 
            model: post, 
            url: 'https://jsonplaceholder.typicode.com/users' 
        }); 
  
        var posts = new collection(); 
        posts.fetch(); 
        console.log(posts) 
    </script> 
</body> 
  
</html>

Output:

Backbone.js url Collection

Example 2: In this example, we will see url property of collection is used by all of its model as links for their own data.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS url collection</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 collection</h3> 
    <script type="text/javascript"> 
        var Book_Model = Backbone.Model.extend(); 
        var Collection_Books = Backbone.Collection.extend({ 
            model: Book_Model, 
            url: '/book/author' 
        }); 
  
        document.write("All the Model of collection have same url : <br>"); 
        var Books = new Collection_Books(); 
        var b1 = new Book_Model(); 
        Books.add(b1) 
  
        document.write(`Resource for the Model is reside at :  
                    <b> ${b1.url()} </b><br> `); 
  
        var b2 = new Book_Model(); 
        Books.add(b2) 
  
        document.write(`Resource for the Model is reside at :  
                    <b> ${b2.url()} </b> <br>`); 
  
        var b3 = new Book_Model(); 
        Books.add(b3) 
  
        document.write(`Resource for the Model is reside at :  
                    <b> ${b3.url()} </b><br> `); 
  
    </script> 
</body> 
  
</html>