Demonstrating Backbone.js: Implement Model Part 2

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>

</head>

<body>

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>

</head>

<body>

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>

</head>

<body>

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.

Previous Article: Demonstrating Backbone.js: Implement Model Part 1
Next Article: Demonstrating Backbone.js: Implement Model Part 3