Backbone.js Model.set() Method
In this Backbone.js framework tutorial, we will discuss the set() method in the model class.
Backbone.js is a framework that is used to build web applications which follow the style of JavaScript.
It supports models, events, collections, views, and utilities.
By using any of the previous functionalities, we can create and perform different operations on the given data in a web application.
Points to Remember
- It is used with JavaScript.
- We can implement the framework inside the <script> tag.
- This framework supports JavaScript methods and functions like output and reading input.
- <script> tag is placed inside <head> tag or in <body> tag.
- It is important to have Content Delivery Network (CDN) links to run the web application on the server.
Let’s See the Structure To Place the Code
CDN Links are placed with the src attribute of the script tag.
CDN Links
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>
The set() method in the Backbone.js model will set the value to the model’s attribute.
Attribute stores values in a model. For a model, there can be any number of attributes.
If the attribute is not found in a model, then it will return “undefined”.
Syntax:
Parameter:
It takes only one parameter.
The attribute parameter refers to the property which a model has. It takes value in the format – {attribute:value,….}
Approach
1. Create a Backbone model using the extend() method.
Syntax:
2. Create a model object from the previous method using a new keyword.
Syntax:
3. Explore the set() method in Backbone.js.
Let’s discuss several examples of the Backbone.js model set() method.
Example 1
In this example, we will create a Modal class named – Flowers and create a model object – flower from it.
After that, we used the set() method to create three attributes – (flower_name,flower_sepals,flower_petals) with values.
Finally, we used the get() method to return all attribute values using JSON.stringify() through document.write() method.
We are implementing this entire functionality inside the <script> tag.
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>
<script>
//create Model named Flowers using extend()
var Flowers = Backbone.Model.extend();
// create a variable named flower using the above model.
var flower = new Flowers();
//create flower_name attribute and set to "lotus"
//create flower_sepals attribute and set to 4
//create flower_petals attribute and set to 5
flower.set({ flower_name:"lotus",flower_sepals: 4, flower_petals:5});
//display the flower model attributes
document.write("<strong>Flower Data: </strong>",JSON.stringify(flower))
</script>
</head>
<body>
<center>
<h1>Linux Hint</h1>
</center>
</body>
</html>
Output:
Run the application in your browser by saving the code in the file with .html as an extension.
We can see that all the attributes along with values were returned in JSON Format.
Example 2
In this example, we will create a Modal class named – Flowers and create a model object – flower from it.
After that we used the set() method to create three attributes – (flower_name,flower_sepals,flower_petals) with values.
Finally, we used the get() method to return all the attribute values using JSON.stringify() through the document.write() method.
We are implementing this entire functionality inside the <body> tag.
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>
</head>
<body>
<center>
<h1>Linux Hint</h1>
</center>
<script>
//create Model named Flowers using extend()
var Flowers = Backbone.Model.extend();
// create a variable named flower using the above model.
var flower = new Flowers();
//create flower_name attribute and set to "lotus"
//create flower_sepals attribute and set to 4
//create flower_petals attribute and set to 5
flower.set({ flower_name:"lotus",flower_sepals: 4, flower_petals:5});
//display the flower model attributes
document.write("<strong>Flower Data: </strong>",JSON.stringify(flower))
</script>
</body>
</html>
Output:
Run the application in your browser by saving the code in the file with .html as an extension.
We can see that all the attributes along with values were returned in JSON Format.
Example 3
It is also possible to display each attribute using the get() method after setting the values using the set() method.
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" ></script>
<script>
//create Model named Flowers using extend()
var Flowers = Backbone.Model.extend();
// create a variable named flower using the above model.
var flower = new Flowers();
//create flower_name attribute and set to "lotus"
//create flower_sepals attribute and set to 4
//create flower_petals attribute and set to 5
flower.set({ flower_name:"lotus",flower_sepals: 4, flower_petals:5});
//get the flower_name that is not existing
document.write("<strong>Flower Name: </strong> "+ flower.get('flower_name'));
document.write("<br>");
//get the flower_sepals that is not existing
document.write("<strong>Flower Sepals: </strong> "+ flower.get('flower_sepals'));
document.write("<br>");
//get the flower_petals that is not existing
document.write("<strong>Flower Petals: </strong> "+ flower.get('flower_petals'));
</script>
</head>
<body>
<center>
<h1>Linux Hint</h1>
</center>
</body>
</html>
Output:
Conclusion
In this Backbone.js tutorial, we discussed how to set the attribute values using set() in Backbone.js model. Also, we discussed two different approaches to implementing this method. We used the JSON.stringify() method to display the entire model object in JSON Format and the get() method to display each attribute.
Source: linuxhint.com