Skip to content

Commit d7c3845

Browse files
author
Ashwin Hegde
committed
Merge pull request #24 from hegdeashwin/develop
Develop
2 parents ffdaf07 + 629b66e commit d7c3845

33 files changed

+817
-1442
lines changed

‎codes/Ch3_View_Events_Templates/Ch3_1_View/Example1/Example-1.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Example 1: Backbone View</title>
6+
</head>
7+
<body>
8+
<h1>Ch 3: Understanding Backbone View</h1>
9+
<h2>How to run this example?</h2>
10+
<ol>
11+
<li>Open Example-1.html in browser.</li>
12+
<li>Press F12, go to console tab.</li>
13+
</ol>
14+
15+
<!-- Step 1:
16+
Include jQuery, Here the jQuery is included with in js directory,
17+
Thus the relative path for the file becomes ../../../js/jquery-min.js.
18+
19+
IMPORTANT NOTE:
20+
Backbone.JS has light dependence on jQuery for DOM manipulation.
21+
-->
22+
<script src="../../../js/jquery-min.js" type="text/javascript"></script>
23+
24+
<!-- Step 2:
25+
Include Underscore, Here the Underscore is included with in js directory,
26+
Thus the relative path for the file becomes ../../../js/underscore-min.js
27+
28+
IMPORTANT NOTE:
29+
Underscore.js should always included before Backbone.JS.
30+
else Browser console will show error, because Backbone’s only dependency is Underscore.js
31+
-->
32+
<script src="../../../js/underscore-min.js" type="text/javascript"></script>
33+
34+
35+
<!-- Step 3:
36+
Include Backbone, Here the Backbone is included with in js directory,
37+
Thus the relative path for the file becomes ../../../js/backbone.js
38+
-->
39+
<script src="../../../js/backbone-min.js" type="text/javascript"></script>
40+
41+
<!-- Step 4:
42+
Include example-main-1.js, Here the example-main-1.js is included with in js directory,
43+
Thus the relative path for the file becomes example-main-1.js.
44+
45+
NOTE: example-main-1.js is custom user defined file.
46+
You can change its name as per your requirements.
47+
48+
example-main-1.js is where your application begins.
49+
You should customize it in order to initialize your views, models, collections and routers.
50+
-->
51+
<script src="example-main-1.js"></script>
52+
</body>
53+
</html>

‎codes/Ch3_View_Events_Templates/Ch3_1_View/Example1/example-main-1.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
(function() {
2+
3+
/**
4+
* The goal of this file is to provide the basic understanding of
5+
* 1. Create Backbone View
6+
* 2. Create instance of Backbone View
7+
* 3. Setting default el reference
8+
* 4. Setting classname, id and tagname
9+
* 5. Setting custom el reference
10+
*/
11+
12+
/**
13+
* Creating a new View called MasterView by extending Backbone.View class
14+
* Syntax: Backbone.View.extend(properties, [classProperties])
15+
*/
16+
var MasterView = Backbone.View.extend({
17+
/**
18+
* `initialize` is a constructor function which gets called automatically at
19+
* the time of instance creation
20+
*/
21+
initialize: function() {
22+
console.log("Your View have been initialize.");
23+
},
24+
25+
/**
26+
* if `tagName` is not specified then its default to `div`;
27+
* This will set class name for the DOM element to which your view is refering to
28+
* You can also set multiple classes like 'container mainpage centerPanel ...'
29+
* This is optional property;
30+
*/
31+
className: 'container',
32+
33+
/**
34+
* This will set id for the DOM element to which your view is refering to
35+
* This is optional property;
36+
*/
37+
id: 'master'
38+
39+
});
40+
41+
/**
42+
* Creating an instance of MasterView.
43+
*/
44+
var masterView = new MasterView();
45+
console.log(masterView);
46+
47+
/**
48+
* masterView.el will display <div id="master" class="container"></div>
49+
*/
50+
console.log(masterView.el);
51+
52+
/**
53+
* Creating a new view called ChildView by extending Backbone.View class.
54+
*/
55+
var ChildView = Backbone.View.extend({
56+
57+
/**
58+
* tagName is specified as 'ul' will override the default
59+
*/
60+
tagName: 'ul',
61+
62+
className: 'row',
63+
64+
id: 'child'
65+
66+
});
67+
68+
/**
69+
* Creating an instance of ChildView.
70+
*/
71+
var childView = new ChildView();
72+
73+
/**
74+
* childView.el will display <div id="child" class="row"></div>
75+
*/
76+
console.log(childView.el);
77+
78+
})();

‎codes/Ch3_View_Events_Templates/Examples/Example3/Example-3.html‎ renamed to ‎codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example1/Example-1.html‎

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,26 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Example 3: Backbone View, Events & Templates</title>
6-
<style>
7-
body { padding-top: 20px; }
8-
</style>
9-
<link href="../../../css/bootstrap.min.css" rel="stylesheet"/>
5+
<title>Example 1: Backbone Templating</title>
106
</head>
117
<body>
8+
<h1>Ch 3: Understanding Backbone Templating</h1>
9+
<h2>How to run this example?</h2>
10+
<ol>
11+
<li>Open Example-1.html in browser.</li>
12+
<li>Press F12, go to console tab.</li>
13+
</ol>
14+
1215
<div class="container">
13-
<div class="row">
14-
<div class="hero-unit">
15-
<div class="row">
16-
<h2>Structuring your web apps via Backbone.JS</h2>
17-
</div>
18-
<div class="row">
19-
<h3>Ch 2: Understanding Backbone View, Events &amp; Templates</h3>
20-
</div>
21-
<hr>
22-
<p class="lead">How to run this example.</p>
23-
<ol>
24-
<li>Open Example-3.html in browser.</li>
25-
<li>Press F12, go to console tab.</li>
26-
<li>See the message get displayed on that console tab.</li>
27-
</ol>
28-
</div>
29-
</div>
3016
<div class="row" id="directionApi">
3117
<!-- Underscore Micro-Template -->
3218
<script type="text/template" id="routesTable">
33-
<table class="table table-bordered">
19+
<table border="1">
3420
<thead>
35-
<tr>
21+
<tr calspan="3">
3622
<th>Routes</th>
3723
<th>Bounds</th>
24+
<th>Coordinate</th>
3825
</tr>
3926
</thead>
4027
<tbody>
@@ -82,30 +69,21 @@ <h3>Ch 2: Understanding Backbone View, Events &amp; Templates</h3>
8269
<script src="../../../js/underscore-min.js" type="text/javascript"></script>
8370

8471
<!-- Step 3:
85-
Include JSON2, Here the JSON2 is included with in js directory,
86-
Thus the relative path for the file becomes ../../../js/json2.js
87-
88-
IMPORTANT NOTE:
89-
json2.js should always included for JSON support for older browsers.
90-
-->
91-
<script src="../../../js/json2.js" type="text/javascript"></script>
92-
93-
<!-- Step 4:
9472
Include Backbone, Here the Backbone is included with in js directory,
9573
Thus the relative path for the file becomes ../../../js/backbone.js
9674
-->
9775
<script src="../../../js/backbone-min.js" type="text/javascript"></script>
9876

99-
<!-- Step 5:
100-
Include example-main-3.js, Here the example-main-3.js is included with in js directory,
101-
Thus the relative path for the file becomes example-main-3.js.
77+
<!-- Step 4:
78+
Include example-main-1.js, Here the example-main-1.js is included with in js directory,
79+
Thus the relative path for the file becomes example-main-1.js.
10280
103-
NOTE: example-main-3.js is custom user defined file.
81+
NOTE: example-main-1.js is custom user defined file.
10482
You can change its name as per your requirements.
10583
106-
example-main-3.js is where your application begins.
84+
example-main-1.js is where your application begins.
10785
You should customize it in order to initialize your views, models, collections and routers.
10886
-->
109-
<script src="example-main-3.js"></script>
87+
<script src="example-main-1.js"></script>
11088
</body>
11189
</html>

‎codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example1/example-main-1.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
(function() {
2+
/**
3+
* The goal of this file is to provide the basic understanding of
4+
* 1. Setting DOM reference using `el`
5+
* 2. Compiling Underscore template
6+
* 3. Injecting data to template
7+
* 4. Using this.$el to render template
8+
*/
9+
10+
/**
11+
* Creating a new view called MasterModel by extending Backbone.View class
12+
* Syntax: Backbone.View.extend(properties, [classProperties])
13+
*/
14+
var MasterView = Backbone.View.extend({
15+
/**
16+
* `initialize` is a constructor function which gets called automatically at
17+
* the time of instance creation
18+
*/
19+
initialize: function() {
20+
this.render();
21+
},
22+
23+
/**
24+
* `el` is a DOM reference for the view
25+
*/
26+
el: "#directionApi",
27+
28+
/**
29+
* Using underscore _.template method to compile html template
30+
*/
31+
template: _.template($("#routesTable").html()),
32+
33+
/**
34+
* Render function can be used for data injection and rendering purpose;
35+
* Also passing data to template;
36+
*/
37+
render: function() {
38+
this.$el.html(this.template({
39+
"ne_lat": "19.09192670",
40+
"ne_lng": "73.85839480",
41+
"sw_lat": "18.52064730",
42+
"sw_lng": "72.87766890"
43+
}));
44+
}
45+
46+
});
47+
48+
var masterView = new MasterView();
49+
console.log(masterView.el);
50+
51+
})();

‎codes/Ch3_View_Events_Templates/Examples/Example2/Example-2.html‎ renamed to ‎codes/Ch3_View_Events_Templates/Ch3_2_Templating/Example2/Example-2.html‎

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,38 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Example 2: Backbone View, Events & Templates</title>
6-
<style>
7-
body { padding-top: 20px; }
8-
</style>
9-
<link href="../../../css/bootstrap.min.css" rel="stylesheet"/>
5+
<title>Example 2: Backbone Templating</title>
106
</head>
117
<body>
12-
<div class="container">
13-
<div class="row">
14-
<div class="hero-unit">
15-
<div class="row">
16-
<h2>Structuring your web apps via Backbone.JS</h2>
17-
</div>
18-
<div class="row">
19-
<h3>Ch 2: Understanding Backbone View, Events &amp; Templates</h3>
20-
</div>
21-
<hr>
22-
<p class="lead">How to run this example.</p>
23-
<ol>
24-
<li>Open Example-2.html in browser.</li>
25-
<li>Press F12, go to console tab.</li>
26-
<li>See the message get displayed on that console tab.</li>
27-
</ol>
28-
</div>
29-
</div>
8+
<h1>Ch 3: Understanding Backbone Templating</h1>
9+
<h2>How to run this example?</h2>
10+
<ol>
11+
<li>Open Example-2.html in browser.</li>
12+
<li>Press F12, go to console tab.</li>
13+
</ol>
3014

31-
<div class="row">
32-
<div class="scope">
33-
<input type="button" class="btn btn-error" value="Click Me"/>
34-
</div><br>
35-
<div class="workspace">
36-
<input type="submit" class="btn btn-primary" value="Submit"/>
37-
<input type="reset" class="btn btn-success" value="Reset"/>
38-
</div>
15+
<div class="container">
16+
<div class="row" id="directionApi">
17+
<script type="text/template" id="routesTable">
18+
<table border="1">
19+
<thead>
20+
<tr>
21+
<th>Name</th>
22+
<th>Email</th>
23+
<th>Website</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<% _.each(data, function(data) { %>
28+
<tr>
29+
<td><%= data.name %></td>
30+
<td><%= data.email %></td>
31+
<td><%= data.website %></td>
32+
</tr>
33+
<% }); %>
34+
</tbody>
35+
</table>
36+
</script>
3937
</div>
4038
</div>
4139

@@ -59,21 +57,12 @@ <h3>Ch 2: Understanding Backbone View, Events &amp; Templates</h3>
5957
<script src="../../../js/underscore-min.js" type="text/javascript"></script>
6058

6159
<!-- Step 3:
62-
Include JSON2, Here the JSON2 is included with in js directory,
63-
Thus the relative path for the file becomes ../../../js/json2.js
64-
65-
IMPORTANT NOTE:
66-
json2.js should always included for JSON support for older browsers.
67-
-->
68-
<script src="../../../js/json2.js" type="text/javascript"></script>
69-
70-
<!-- Step 4:
7160
Include Backbone, Here the Backbone is included with in js directory,
7261
Thus the relative path for the file becomes ../../../js/backbone.js
7362
-->
7463
<script src="../../../js/backbone-min.js" type="text/javascript"></script>
7564

76-
<!-- Step 5:
65+
<!-- Step 4:
7766
Include example-main-2.js, Here the example-main-2.js is included with in js directory,
7867
Thus the relative path for the file becomes example-main-2.js.
7968

0 commit comments

Comments
 (0)