Post
Ask Question

Demonstrating Backbone.js: Implement Model Part 1

Introduction

Welcome to the “Demonstrate Backbone.js“ article series. This article demonstrates how to create and use a Model in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Our previous article was an introduction to Backbone.js that you can get it form here.

Implement Model in Backbone.js

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 when we want to use Backbone.js.

So we are ready with the environment setting and now we will implement the Model in Backbone.js. As per the introduction in the earlier article, the Model is very similar to a class in any Object Oriented Programming language.

In the following snippet we will implement the Model with a few properties. Have a look at the following code.

Here initialize is the constructor for the product.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs"
Inherits="JavaScript.JavaScript" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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({
                initialize: function () {
                    console.log("Welcome to Csharp corner")

                }
            });
            var product = new Product();
        </script>
    </form>
</body>
</html>



Set the properties in the Model

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs"
Inherits="JavaScript.JavaScript" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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({
                initialize: function () {
                    console.log("Welcome to Csharp corner")
                }
            });
            var product = new Product({name: 'Apple', quantity: '150' });
            console.log(product.get('name'));
        </script>
    </form>
</body>
</html>


Here is the output:


Access default properties of Model class

Here we have set the Model class property with default values.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs"
Inherits="JavaScript.JavaScript" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head 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({
                defaults: {
                    name: 'Apple',
                    quantity: '150'
                }
            });
            var p = new Product({});
            console.log("Name:- " + p.get('name'));
            console.log("Quantity:- " + p.get('quantity'));
        </script>
    </form>
</body>
</html>


In order to access the Model class, at first we need to create an object of the Model class and then using the “get()” function we can get the value of a specific property.

Here is sample output.


Summary

In this article, I explained how to implement a Model using Backbone.js. We also saw how to set the properties in the Model. Then, we saw how to access default properties of the Model class.

In the next articles, we will understand more about the Model with more examples.

 


Similar Articles