Introduction
This article describes how to create a Reactive backbone.js application. In this tutorial we first create a simple HTML file such as "index.html" then we create an another HTML file "header.html". Now let's see how we will create application. Here we need to crerate these HTML file
Step 1
Create a Web application:
- Start Visual Studio 2013. From the Start window select "New Project".
- Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012" and select "ASP.NET Empty Web Application" as in the following:
- Click on the "OK" button.
Step 2
Now add the HTML page.
- In the Solution Explorer.
- Right-click on the project tjhen select "Add" -> "HTML page".
- Change the name of the page.
- Click on the "Add" button.
First we will create an "index.html" file and add this code to this file:
<!DOCTYPE html>
<html>
<head>
<title>Backbone | Homepage</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/header.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive</h1>
<p>There is backbone reactive application</p>
<p>This is just a simple homepage.</p>
<p>The content replace with the backbone.</p>
</div>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/underscore-min.js"></script>
<script src="Scripts/backbone-min.js"></script>
<script src="Scripts/lib/dashboard.js"></script>
</body>
</html>
Now add another HTML file "header.html" with this code:
<!DOCTYPE html>
<html>
<head>
<title>Backbone | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/header.html">List</a>
</div>
<div id="content">
<h1>Backbone List</h1>
<p>
This page for those users that whatever reason they do not enable JavaScript.
</p>
<p>Creating the simple list..</p>
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Date</th>
<th>Subject</th>
<th>From</th>
</tr>
</thead>
<tbody>
<tr>
<td>12:54</td>
<td>18 January 2014</td>
<td><a href="/file/f3.html">I love cricket</a></td>
<td>Smith</td>
</tr>
<tr>
<td>11:45</td>
<td>20 January 2014</td>
<td><a href="/file/f2.html">Possible expansion plans</a></td>
<td>Wisdom</td>
</tr>
<tr>
<td>12:54</td>
<td>27 January 2014</td>
<td><a href="/file/f1.html">Can't do anything</a></td>
<td>Jhon</td>
</tr>
</table>
</div>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/underscore-min.js"></script>
<script src="Scripts/backbone-min.js"></script>
<script src="Scripts/lib/list.js"></script>
</body>
</html>
Now we will add three other HTML files, f1.html, f2.html and f3.html.
f1.html code:
<!DOCTYPE html>
<html>
<head>
<title>Backbone | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/header.html">List</a>
</div>
<div id="content">
<h1>Backbone Reactive: Message</h1>
<p><label>Subject:</label> Can't do anything</p>
<p><label>Date:</label> 27 January 2014, 12:54</p>
<p><label>From:</label> Jhon</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, diam sed pellentesque laoreet, nisi ligula vulputate orci, et luctus massa nulla et nulla. Phasellus malesuada ligula in lectus mattis convallis. Fusce ac lectus et mauris auctor rhoncus a quis est.</p>
<p>Aenean facilisis nisl a sem suscipit hendrerit. Morbi non ligula non mi pellentesque interdum eget sit amet nibh. Vivamus quis rutrum nisl. Mauris at odio ipsum. Sed risus nisl, porttitor id tristique at, commodo eget risus. Nam fringilla turpis et quam porttitor cursus.</p>
<hr size="0" />
<p><a href="/header.html">Back to list</a></p>
</div>
</body>
</html>
f2.html code:
<!DOCTYPE html>
<html>
<head>
<title>Backbone | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/header.html">List</a>
</div>
<div id="content">
<h1>backbone List</h1>
<p><label>Subject:</label> Possible Expansion Plans</p>
<p><label>Date:</label> 20 January 2014, 11:45</p>
<p><label>From:</label> Wisdom</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, diam sed pellentesque laoreet, nisi ligula vulputate orci, et luctus massa nulla et nulla. Phasellus malesuada ligula in lectus mattis convallis. Fusce ac lectus et mauris auctor rhoncus a quis est.</p>
<p>Aenean facilisis nisl a sem suscipit hendrerit. Morbi non ligula non mi pellentesque interdum eget sit amet nibh. Vivamus quis rutrum nisl. Mauris at odio ipsum. Sed risus nisl, porttitor id tristique at, commodo eget risus. Nam fringilla turpis et quam porttitor cursus.</p>
<hr size="0" />
<p><a href="/header.html">Back to list</a></p>
</div>
</body>
</html>
f3.html code:
<!DOCTYPE html>
<html>
<head>
<title>Backbone | List Page</title>
</head>
<body>
<div id="mainmenu">
<a href="/">Home</a> |
<a href="/header.html">List</a>
</div>
<div id="content">
<h1>Backbone list</h1>
<p><label>Subject:</label> I love cricket</p>
<p><label>Date:</label> 18 January 2014, 12:54</p>
<p><label>From:</label> Smith</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida, diam sed pellentesque laoreet, nisi ligula vulputate orci, et luctus massa nulla et nulla. Phasellus malesuada ligula in lectus mattis convallis. Fusce ac lectus et mauris auctor rhoncus a quis est.</p>
<p>Aenean facilisis nisl a sem suscipit hendrerit. Morbi non ligula non mi pellentesque interdum eget sit amet nibh. Vivamus quis rutrum nisl. Mauris at odio ipsum. Sed risus nisl, porttitor id tristique at, commodo eget risus. Nam fringilla turpis et quam porttitor cursus.</p>
<hr size="0" />
<p><a href="/header.html">Back</a></p>
</div>
</body>
</html>
Execute the application. It will display like this:
Click on the "List" link; it then displays like this. The other page will display a table with a link, when we click on the link it will open the related file:
Join the conversation! Your thoughts help the community grow.