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

  1. It is used with JavaScript.
  2. We can implement the framework inside the <script> tag.
  3. This framework supports JavaScript methods and functions like output and reading input.
  4. <script> tag is placed inside <head> tag or in <body> tag.
  5. 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

<html>

   <head>
          <script>
               You can use Backbone.js framework here
          </script>
   </head>
    <body>
           <script>
               You can also use Backbone.js framework here
          </script>
   </body>


</html>

CDN Links are placed with the src attribute of the script tag.

CDN Links

<script src="https://ift.tt/yg6aIeb" ></script>

<script src="https://ift.tt/ED4w2vz" ></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:

model_object.set(attribute)   

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:

var ModelClass = Backbone.Model.extend();

2. Create a model object from the previous method using a new keyword.

Syntax:

var model_object = new ModelClass ();

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.

<html>

   <head>
        <script src="https://ift.tt/1OpHgML" ></script>
         
           <script src="https://ift.tt/yg6aIeb" ></script>
          <script src="https://ift.tt/ED4w2vz" ></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.

<html>

   <head>
        <script src="https://ift.tt/1OpHgML" ></script>
         
           <script src="https://ift.tt/yg6aIeb" ></script>
          <script src="https://ift.tt/ED4w2vz" ></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.

<html>

   <head>
        <script src="https://ift.tt/1OpHgML" ></script>
         
           <script src="https://ift.tt/yg6aIeb" ></script>
          <script src="https://ift.tt/ED4w2vz" ></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.



from https://ift.tt/kq48Yjd

Post a Comment

0 Comments