Introduction
Welcome to the "Demonstrating Backbone.js" article series. This article is Part 2 of the series. We will see how to create and use a Model in Backbone.js. This article starts with the concept of Backbone.js and various components of it. The previous article provided an introduction to Backbone.js and Part 1 model implementation that you can get from here.
Demonstrating Backbone.js: Implement Model Part 1
Create Model class
In order to implement Backbone.js we first need to include the Backbone.js library and since it depends upon jQuery we need to include the jQuery library to use Backbone.js.
In this following snippet at first we are creating one empty class and then we are setting the class property during object creation. Here we are setting the name and manufacturer property to a “p” object of “Product” class.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="backbone/Jquery.js"></script>
<script src="backbone/underscore-min.js"></script>
<script src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var Product = Backbone.Model.extend({
});
var p = new Product({ name: 'Xperia', manufacturer: 'sony' });
console.log("Name:- " + p.get('name'));
console.log("Manufacturer:- " + p.get('manufacturer'));
</script>
</form>
</body>
</html>
Here is the sample output of this example.
![Model class]()
Set Model with various properties
In the following snippet we created a “multi” Model and in the first object of this Model we have set the “name” and “manufacturer” property and in the second model we have set a “studentname” and “college” property into it.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="backbone/Jquery.js"></script>
<script src="backbone/underscore-min.js"></script>
<script src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var multi = Backbone.Model.extend({
});
var product = new multi({ name: 'Asha', manufacturer: 'Nokia' });
var student = new multi({ studentname: 'Sagar', college: 'Csharp' });
console.log("Name:- " + product.get('name'));
console.log("manufacturer:- " + product.get('manufacturer'));
console.log("Studentname:- " + student.get('studentname'));
console.log("College:- " + student.get('college'));
</script>
</form>
</body>
</html>
Here is the sample output.
![Model with various properties]()
Using set() method in model property
Here we have set a Model property using the set Method. We have created an empty Model and then we have set the Model property and we are accessing them using the get() method.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="backbone/Jquery.js"></script>
<script src="backbone/underscore-min.js"></script>
<script src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
Product = Backbone.Model.extend({
});
var product = new Product();
product.set({ name: "Iphone", manufacturer: "Apple" });
console.log(product.get('name'));
console.log(product.get('manufacturer'));
</script>
</form>
</body>
</html>
Here is the sample output
![set() method]()
Summary
In this article, I explained how to implement Model Backbone.js. We also saw how to set various properties in a Model .Then we saw how to access properties of the Model class using get(). In future articles we will understand more about Models with examples. I hope you have liked this.