Understand how to Implement View in Backbone.js Part 1

Rama Sagar
Posted by in JavaScript category on for Intermediate level | Points: 250 | Views : 4013 red flag

According to Thomas Davis Backbone views are used to reflect what your applications' data models look like. They are also used to listen to events and react accordingly.

Introduction


In this article we will see implementation of view in Backbone.js..


Objective

The Objective of the article is to focus on view functionality and how to use views with a Javascript templating library

In order to implement Backbone.js  we have to add jquery because backbone needs Jquery or some other DOM library
and of course we also need backbone.js library.

Using the code



Here we had a container with a sample stuff and a template for adding into container...
we had a sample model with data..
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <style type="text/css">
        #container {
            padding: 20px;
            border: 1px solid #333;
            width: 400px;
        }

        #list-template {
            display: none;
        }
    </style>
    <script type="text/javascript" src="backbone/Jquery.js"></script>
    <script type="text/javascript" src="backbone/backbone-min.js"></script>
    <script type="text/javascript" src="backbone/underscore-min.js"></script>

</head>
<body>

    <div id="container">
        <button>Load</button>
        <ul id="list">
        </ul>
    </div>

    <div id="list-template">
        <li><a href=""></a></li>
    </div>


    <form id="form1" runat="server">
        <script>

            model = new Backbone.Model({
                data: [
                    { text: "Dotnetfunda", href: "http://dotnetfunda.com" },
                    { text: "itfunda", href: "http://itfunda.com/" },
                    { text: "kidsfunda", href: "http://kidsfunda.com" }
                ]
            });

            var View = Backbone.View.extend({
                initialize: function () {

                    console.log('initializing');
                }
            });

            var view = new View();


        </script>
    </form>

</body>
</html>


Here is sample output


Passing Options


Here we have send a blankoption which is directly accessible by this.options

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <style type="text/css">
        #container {
            padding: 20px;
            border: 1px solid #f00;
            width: 400px;
        }

        #list-template {
            display: none;
        }
    </style>
    <script type="text/javascript" src="backbone/Jquery.js"></script>
    <script type="text/javascript" src="backbone/backbone-min.js"></script>
    <script type="text/javascript" src="backbone/underscore-min.js"></script>

</head>
<body>
    <div id="container">
        <button>Load</button>
        <ul id="list">
        </ul>
    </div>

    <div id="list-template">
        <li><a href=""></a></li>
    </div>
    <form id="form1" runat="server">
        <script>

            model = new Backbone.Model({
                data: [
                    { text: "Dotnetfunda", href: "http://dotnetfunda.com" },
                    { text: "itfunda", href: "http://itfunda.com/" },
                    { text: "kidsfunda", href: "http://kidsfunda.com" }
                ]
            });

            var View = Backbone.View.extend({
                initialize: function () {

                    console.log(this.options.blankoption);

                }
            });

            var view = new View({ blankoption: "empty string" });


        </script>
    </form>
</body>
</html>




Here is sample output



Conclusion

In this article we have learned how to use view in backbone.js...In next part we will see more on views

Reference

http://backbonetutorials.com/what-is-a-view/

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)