Backbone.js model is the heart or main component of a javascript application. It contains the interaction data and logic of the user interaction with the view layer. In other words, it is the brain or logic behind the event triggering and decides how to handle user events and interaction it does conversions, validations, computation, and access control, Model provides us with methods to handle changes.
A model can also be understood as a representation of basic logic or business logic of an application that handles data storage and manipulation.
Syntax:
Backbone.Model.Extend( properties, classProperties )
Parameter description:
- properties: It is used to describe the instance properties for a collection.
- classProperties: It is used to describe the class properties for a collection.
Below are methods associated with Backbone.js model class:
- extend: It is used to extend the parent class model to create a custom class.
- initialize: It is used to invoke the class’s constructor whenever a model is created.
- get: It is used to get the value of an attribute from the model.
- set: It is used to set the value of an attribute in the model.
- escape: It is used to get the html-escaped version of a model’s attributes.
- has: It is used to get a true value if the attribute value is defined with a non-null value or non-undefined value.
- unset: It is used to remove an attribute from a backbone model.
- clear: It is used to remove all attributes, which also includes the id attribute from a backbone model.
- id: It is used to identify the model entity uniquely.
- idAttribute: It is used to specify the model’s unique identifier.
- cid: It is used to uniquely identify the model on the client.
- attributes: It is used to define the property of a model.
- changed: It is used to change all the attributes that have changed by using the set() method.
- defaults: It is used to set a default value to a model.
- toJSON: It is used to get a copy of the attributes as an object for JSON stringification.
- sync: It is used to communicate with the server and to represent the state of a model.
- fetch: It is used to accept the data from the server by delegating the sync() method in the model.
- save: It is used to save the model data.
- destroy: It is used to remove or destroy the model from the server.
Below are Underscore methods associated with Backbone.js model class:
- validate: It is used for validation of input provided for displaying results.
- validationError: It is used for displaying errors when there is validation failure or in another case when there is an invalid event triggering.
- isValid: It is used for checking the state of the model and to validate the attributes of the model.
- url: It is used to provide a return of URL at the model’s resource location.
- urlRoot: It is used for activation of url function and it is part of the model class.
- parse: It is used for returning the data of the model by the response object passing method.
- clone: It is used for creating a copy of the model and to copy an object of the model class to another object of the model class.
- isNew: It is used for checking if the model created is a newly created model or an existing model.
- hasChanged: It is used for checking the change in the attributes, this method returns TRUE output if there is a change present.
- changedAttributes: It is used to return the changed attributes of the model class, this method returns boolean TRUE if there is a change present in the attributes of the model and it returns boolean FALSE if there is no change at all in the model class.
- previous: It is used for finding the previously changed state or value of the attribute of a model class.
- previousAttributes: It is used to reset all the attributes of a model to the previous state of the model class.
Example 1:
HTML
<!DOCTYPE html> <html>
<head>
<title>backbone.js model example</title>
<script src=
type="text/javascript"></script>
<script src=
type="text/javascript"></script>
<script src=
type="text/javascript"></script>
</head>
<body style="background-color:black;">
<h1 style="color:green;">GeeksforGeeks</h1>
<button onclick="invoke()">Show data:</button>
<script type="text/javascript">
// Here we are creating a custom model
// class by extending it.
var data_collection = Backbone.Model.extend({
defaults: {
website: "GeeksForGeeks",
rating: 10
},
});
var example = Backbone.Collection.extend({
model: data_collection
});
function invoke() {
var Z = new example({});
document.write("Collection: ",
JSON.stringify(Z));
}
</script>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<head>
<title>backbone model example</title>
<script src=
type="text/javascript"></script>
<script src=
type="text/javascript"></script>
<script src=
type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var data_collection = Backbone.Model.extend({
defaults: {
website: "GeeksForGeeks",
rating: 10
},
});
var example = Backbone.Collection.extend({
model: data_collection
});
var Z = new example({});
window.alert("backbone models example");
document.write("Backbone model");
document.write("output: ", JSON.stringify(Z));
</script>
</body>
</html>
|
Output:
Reference: https://backbonejs.org/#Model