Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to use Backbone.js in a sample application. 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 routers and collections. You can get them from the following:

In this article we will see how to use Backbone.js in a simple store application that displays products.

Here we will use a Google web fonts style sheet and customized style sheet.

google.css
  1. @font-face {
  2. font-family: 'PT Sans';
  3. font-style: normal;
  4. font-weight: 400;
  5. src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
  6. }
  7. @font-face {
  8. font-family: 'PT Sans';
  9. font-style: normal;
  10. font-weight: 700;
  11. src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
  12. }
Style.css
  1. /*-------------------------
  2. Simple reset
  3. --------------------------*/
  6. *{
  7. margin:0;
  8. padding:0;
  9. }
  12. /*-------------------------
  13. General Styles
  14. --------------------------*/
  17. html{
  18. background-color:#000000;
  19. }
  21. body{
  22. font:15px/1.3 Arial, sans-serif;
  23. color: #4f4f4f;
  24. }
  26. a, a:visited {
  27. outline:none;
  28. color:#389dc1;
  29. }
  31. a:hover{
  32. text-decoration:none;
  33. }
  38. /*----------------------------
  39. The main content element
  40. -----------------------------*/
  43. #main{
  44. padding:100px;
  45. background-color:#ccc;
  46. box-shadow:0 0 1px #ccc;
  47. width:700px;
  48. margin:100px auto;
  49. border-radius:6px;
  50. font:bold 24px/1 'PT Sans', sans-serif;
  51. color:#6b6b6b;
  52. }
  55. #main h1{
  56. font-size:36px;
  57. text-align: center;
  58. text-transform: uppercase;
  59. padding: 0 0 80px;
  61. }
  63. #products{
  64. list-style:none;
  65. margin:0 auto;
  66. width:600px;
  67. }
  69. #products li{
  70. background-color: #fbfbfc;
  71. box-shadow:0 1px 1px #eee;
  72. font-size:22px;
  73. color: #85898b;
  74. padding:22px 30px;
  75. margin-bottom:15px;
  76. border-radius:4px;
  77. cursor:pointer;
  78. }
  80. #products li span{
  81. float:right;
  82. opacity:0.6;
  83. }
  85. #products li input[type=checkbox]{
  86. border:1px solid #ccc;
  87. box-shadow:1px 1px 1px #ccc;
  88. margin-right:10px;
  89. width:16px;
  90. height:16px;
  91. display:inline-block;
  92. vertical-align: middle;
  93. }
  95. #total{
  96. font-size:24px;
  97. text-align:right;
  98. width:570px;
  99. margin:30px auto 0;
  100. padding-right:30px;
  101. }
  103. #total span{
  104. display:inline-block;
  105. min-width:70px;
  106. }
  109. #order{
  110. font:inherit;
  111. font-size:24px;
  112. cursor:pointer;
  113. border:none;
  114. display:block;
  115. background-color:#FFA500;
  116. color:#fff;
  117. text-transform:uppercase;
  118. width:200px;
  119. margin:80px auto 0;
  120. text-align:center;
  121. padding:22px 0;
  122. border-radius: 3px;
  123. box-shadow:0 1px 1px #ddd, 0 0 20px #84b8e0 inset;
  124. }
  126. #order:hover{
  127. opacity: 0.9;
  128. }
Javascript.aspx
In this app we will display the list of products in a store.

Please check the inline comments for a better understanding.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
  3. <!DOCTYPE html>
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  7. <!-- Google web fonts -->
  8. <link href="css/google.css" rel="stylesheet" />
  10. <!-- The main CSS file -->
  12. <link href="css/style.css" rel="stylesheet" />
  15. </head>
  16. <body>
  17. <form id="main">
  18. <h1>Store</h1>
  20. <ul id="products">
  21. <!-- The products will be inserted here -->
  22. </ul>
  24. <p id="total">total: <span>$0</span></p>
  26. <input type="submit" id="order" value="Order" />
  28. </form>
  29. <script type="text/javascript" src="backbone/Jquery.js"></script>
  30. <script type="text/javascript" src="backbone/underscore-min.js"></script>
  31. <script type="text/javascript" src="backbone/backbone-min.js"></script>
  32. <script>
  33. $(function () {
  35. // Create a model for the products
  36. var Product = Backbone.Model.extend({
  38. // Will contain three attributes.
  39. // These are their default values
  41. defaults: {
  42. title: 'My products',
  43. price: 500,
  44. checked: false
  45. },
  47. // Helper function for checking/unchecking a product
  48. toggle: function () {
  49. this.set('checked', !this.get('checked'));
  50. }
  51. });
  54. // Create a collection of products
  55. var ProductList = Backbone.Collection.extend({
  57. // Will hold objects of the Product model
  58. model: Product,
  60. // Return an array only with the checked products
  61. getChecked: function () {
  62. return this.where({ checked: true });
  63. }
  64. });
  66. // Prefill the collection with a number of products.
  67. var products = new ProductList([
  68. new Product({ title: 'Iphone', price: 1200 }),
  69. new Product({ title: 'Xperia', price: 1250 }),
  70. new Product({ title: 'Galaxy Grand', price: 100 }),
  71. new Product({ title: 'Google Nexus', price: 500 }),
  72. new Product({ title: 'Macbook', price: 1500 }),
  73. new Product({ title: 'Nokia Lumia', price: 1500 })
  74. // Add more here
  75. ]);
  77. // This view turns a Product model into HTML
  78. var ProductView = Backbone.View.extend({
  79. tagName: 'li',
  81. events: {
  82. 'click': 'toggleProduct'
  83. },
  85. initialize: function () {
  87. // Set up event listeners. The change backbone event
  88. // is raised when a property changes (like the checked field)
  90. this.listenTo(this.model, 'change', this.render);
  91. },
  93. render: function () {
  95. // Create the HTML
  97. this.$el.html('<input type="checkbox" value="1" name="' + this.model.get('title') + '" /> ' + this.model.get('title') + '<span>$' + this.model.get('price') + '</span>');
  98. this.$('input').prop('checked', this.model.get('checked'));
  101. return this;
  102. },
  104. toggleProduct: function () {
  105. this.model.toggle();
  106. }
  107. });
  109. // The main view of the application
  110. var App = Backbone.View.extend({
  112. // Base the view on an existing element
  113. el: $('#main'),
  115. initialize: function () {
  117. // Cache these selectors
  118. this.total = $('#total span');
  119. this.list = $('#products');
  121. // Listen for the change event on the collection.
  122. // This is equivalent to listening on every one of the
  123. // product objects in the collection.
  124. this.listenTo(products, 'change', this.render);
  127. // Create views for every one of the products in the
  128. // collection and add them to the page
  130. products.each(function (product) {
  132. var view = new ProductView({ model: product });
  133. this.list.append(view.render().el);
  135. }, this); // "this" is the context in the callback
  136. },
  138. render: function () {
  140. // Calculate the total order amount by agregating
  141. // the prices of only the checked elements
  143. var total = 0;
  145. _.each(products.getChecked(), function (elem) {
  146. total += elem.get('price');
  147. });
  149. // Update the total price
  150. this.total.text('$' + total);
  152. return this;
  154. }
  156. });
  158. new App();
  160. });
  161. </script>
  165. </body>
  166. </html>
Output
Summary

In this article, I explained how to use Backbone.js to make a simple store application. In future articles we will understand more about Backbone.js with examples.