Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.
A Model is created simply by extending Backbone.Model
var Geek = Backbone.Model.extend({
});
Instantiating Models: A Model is Instantiated using the “new” keyword.
var geek = new Backbone.Model.extend();
In this article we will see about the below models in backbone.js:
- get() [ model.get(attribute) ]
- set() [ model.set(attribute) ]
- unset() [ model.unset(attribute) ]
- escape() [ model.escape(attribute) ]
Example:
HTML
<!DOCTYPE html> <html> <head> <title>Backbone.js | Model</title> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script type="text/javascript"> var Geek = Backbone.Model.extend({ initialize: function () { document.write("Welcome to neveropen"); }, }); var geek = new Geek(); </script> </head> <body></body> </html> |
Output:
So, initialize() is triggered whenever you create a new instance of a model (models, collections, and views work the same way). It is similar to the constructor in a class.
Let’s understand different models in detail.
Get: model.get(attribute). It is used to get the value of an attribute from the model.
HTML
<!DOCTYPE html> <html> <head> <title>Backbone.js | Model</title> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script type="text/javascript"> Learner = Backbone.Model.extend({ defaults: { name: 'mahesh', age: 19, position: 'JavaScriptDeveloper' }, }); var Geek = new Learner(); // New object is created // Name is displayed document.write("name: ", Geek.get('name'), "<br/>"); // Age is displayed document.write("age: ", Geek.get('age'), "<br/>"); // Position is displayed document.write("position: ", Geek.get('position'), "<br/>"); var geek = new Geek(); </script> </head> <body></body> </html> |
Output:
Set: model.set(attributes,[options]): It is used to update or set a value to the keys.
Example:
HTML
<!DOCTYPE html> <html> <head> <title>Backbone.js | Model</title> <script src= </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script type="text/javascript"> var Geek = Backbone.Model.extend(); var learner = new Geek(); learner.set({ fname: "Mahesh ", lname: "Gaikwad" }); document.write("Name of the learner: ", learner.get("fname"), learner.get("lname")); </script> </head> <body></body> </html> |
Output:
Unset: model.unset(attribute, [options]): Unset method removes an attribute by deleting it from the internal attributes hash.
Example:
HTML
<!DOCTYPE html> <html> <head> <title>Backbone.js | Model</title> type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script type="text/javascript"> var Organisation = Backbone.Model.extend(); var organisation = new Organisation(); organisation.set({ org_name: "gfg.org" }); document.write( "<b>Before using unset method , Organisation name is:</b> ", organisation.get("org_name") ); organisation.unset("org_name"); document.write("<br>"); document.write( "<b>After unset, Organisation name is:</b>", organisation.get("org_name") ); </script> </head> <body></body> </html> |
Output:
Escape: model.escape(attribute) . The Backbone.js escape() Model is similar to get function but it returns the HTML-escaped version of a model’s attribute.
Example:
HTML
<!DOCTYPE html> <html> <head> <title>Backbone.js | Model</title> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script src= type="text/javascript"> </script> <script type="text/javascript"> var Student = Backbone.Model.extend(); var student = new Student(); student.set({ name: "Mahesh Gaikwad" }); document.write(student.escape("name")); </script> </head> <body></body> </html> |
Output:
