Models: Backbone.js Models are a very important part of building applications. The model manages an internal table of data attributes and triggers change events when any of the data in the table is modified. It performs many actions on the data such as like access control, validation, computed property, etc. Model handles syncing data with a persistence layer usually a REST API with a backing database.
Characteristics of Model:
- It stores the various data and logic related to data.
- It is used to load data from the server and also stores the data from the server.
- It triggers events when its data changes.
Now will see how we create Models and Views in Backbone.
Example 1: In this example, we will see how we create a Model. We can create a Model in Backbone with the following extending syntax.
let model = Backbone.Model.extend();
Here .extend( ) are used to add configuration of model. We can see what is model when we search for a model in the console.
Model
Example 2: In this example, we will create a new instance of the model for using the Model. We can create a new instance with the new constructor.
HTML
<!DOCTYPE html> <html> <head> <title>Hello Geeks using Backbone.js</title> <!-- Libraries --> <script src= type="text/javascript"></script> <script src= type="text/javascript"></script> <script src= type="text/javascript"></script> </head> <body> <!-- OUr HTML --> <div id="element">Hello Geeks for Geeks</div> <!-- Javascript code --> <script type="text/javascript"> let model = Backbone.Model.extend({}); let N_model = new model({ id: 1, comment: "hello Geeks" }) console.log(N_model) </script> </body> </html> |
Output:
Instance of model
Views: Backbone.js Views is the atomic chunk of the user interface. Views are used to render the data on the page after any DOM events on the web page. Models are generally unaware of views, but vies are listening to the change event by the model. They represent what data looks like to the user. They are users to handle changes on pages and bind the events and methods. Views are used to render the methods, and collection with DOM events.
Characteristics of Views:
- It listens to the DOM events and renders the model or collection.
- It also manages the user input and all interactions with users.
- It also helps the Model by capturing the user input.
Example 1: In this example, we create Views with the help of the following extending syntax.
let view = Backbone.View.extend();
Output:
view
Example 2: In this example, we initialize the View with a new constructor and respond to the initialization with initializing property of the view which trigger when the view is instance initialized.
HTML
<!DOCTYPE html> <html> <head> <title>Hello Geeks using Backbone.js</title> <!-- Libraries --> <script src= type="text/javascript"></script> <script src= type="text/javascript"></script> <script src= type="text/javascript"></script> </head> <body> <!-- OUr HTML --> <div id="element">Hello Geeks for Geeks</div> <!-- Javascript code --> <script type="text/javascript"> var view = Backbone.View.extend({ initialize: function () { console.log(" Hello Geek this is printed by View ") }, }); // Here when we create instance function will called back var N_view = new view(); </script> </body> </html> |
Output:
Result of View instance
Reference link: https://backbonejs.org/#Model-View-separation