Demonstrating Backbone.js: Implement Model Part 6

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. In our previous articles we saw an Introduction to Backbone.js and in Part 1, Part 2, Part 3, Part 4 and Part 5 the model implementation that you can get from here.

In this part we will see more of Model implementation in Backbone.js.

Default property using prototype attribute

In this part we will learn the default property of the Model class using the prototype attribute. In the following Model implementation we have defined two properties of the “Product” model called name and manufacturer then we are accessing those default properties by the prototype property. Have a look at the following snippet.

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

<!DOCTYPE html>

</head>

<body>

var Product = Backbone.Model.extend({

defaults: {

name: 'Xperia',

manufacturer: 'Sony'

}

});

console.log('Access name by prototype:- ' + Product.prototype.defaults.name);

console.log('Access manufacturer by prototype:- ' + Product.prototype.defaults.manufacturer);

</script>

</form>

</body>

</html>

Here is the output:

Set Default property using prototype attribute

We can set a prototype attribute to a property of the Model class. By this method we can assign a new value to the Model class and can alter the old value.

Here is the sample snippet:

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

<!DOCTYPE html>

</head>

<body>

var Product = Backbone.Model.extend({

defaults: {

name: 'Xperia',

manufacturer: 'Sony'

}

});

Product.prototype.defaults.name = 'Iphone';

Product.prototype.defaults.manufacturer = 'Apple';

console.log(Product.prototype.defaults.name);

console.log(Product.prototype.defaults.manufacturer);

</script>

</form>

</body>

</html>

Output

Summary

In this article, I explained how to use the prototype attribute in the Model class. In future articles we will learn about views with examples. I hope you have liked this. Happy coding.

Previous Article: Demonstrating Backbone.js: Implement Model Part 5