Demonstrating Backbone.js: Implement View Part 3

Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use a View in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of views. You can get them from the following:

Display Model data within a view's method

In the following snippet we will display Model data within a “view”.

<%@ 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({

            defaults: {

                name: '',

                Manufacturer: ''

            }

        });

        var View = Backbone.View.extend({

            initialize: function () {

                var p = new Product({ name: 'Xperia', Manufacturer: 'Sony' })

                this.myfunction(p);

            },

            myfunction: function (Model) {

                console.log(Model.get('name'));

                console.log(Model.get('Manufacturer'));

            }

        });

        var myview = new View();

    </script>

    </form>

</body>

</html>

Here we have created an object of the Product Model within the initialize constructor of the View. Then we are calling “myfunction” and passing the Model object as an argument.

 Model data within view's method
Display Collection using view's function

Here we are passing a Collection of Backbone.js Models as a function parameter.
 

<%@ 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({

        defaults: {

            name: '',

            manufacturer: ''

        }

    });

    var View = Backbone.View.extend({

        initialize: function () {

            //create object of person model

            var p1 = new Product({ name: 'Xperia', manufacturer: 'Sony' })

            var p2 = new Product({ name: 'Iphone', manufacturer: 'Apple' })

            var p3 = new Product({ name: 'Asha', manufacturer: 'Nokia' })

            var p4 = new Product({ name: 'GalaxyGrand', manufacturer: 'Samsung' })

            var productcollection = Backbone.Collection.extend({

                model: Product

            });

            //create object of persocollection Collection

            var p = new productcollection();

            p.add(p1);

            p.add(p2);

            p.add(p3);

            p.add(p4);

 

            this.myfunction(p);

        },

        myfunction: function (Collection) {

            //Traverse all element using each method

            Collection.each(function (object) {

                console.log(object.get('name') + ' ' + object.get('manufacturer'));

            });

        }

    });

    var myview = new View();

</script>

</form>

</body>

</html>

 
Output

 Collection using view's function
Summary

In this article I explained how to display Model data and Collection data. In future articles we will understand more about Models with examples.

Previous article: Demonstrating Backbone.js: Implement View Part 2