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:
<!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 GeeksforGeeks");
},
});
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.
<!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:
<!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:
<!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:
<!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: