74 lines
2.3 KiB
HTML
74 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>The Backbone Store</title>
|
|
<link charset="utf-8" href="jsonstore.css" rel="stylesheet" type="text/css" />
|
|
|
|
<script id="store_index_template" type="text/x-underscore-tmplate">
|
|
<h1>Product Catalog</h1>
|
|
<ul>
|
|
<% for(i=0,l=products.length;i<l;++i) { p = products[i]; %>
|
|
<li class="item">
|
|
<div class="item-image">
|
|
<a href="#item/<%= p.id %>">
|
|
<img alt="<%= p.title %>" src="<%= p.image %>" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<div class="item-artist"><%= p.artist %></div>
|
|
<div class="item-title"><%= p.title %></div>
|
|
<div class="item-price">$<%= p.price %></div>
|
|
<% } %>
|
|
</ul>
|
|
</script>
|
|
|
|
<script id="store_item_template" type="text/x-underscore-template">
|
|
<div class="item-detail"></div>
|
|
<div class="item-image">
|
|
<img alt="<%= title %>" src="<%= large_image %>" />
|
|
</div>
|
|
<div class="item-info"></div>
|
|
<div class="item-artist"><%= artist %></div>
|
|
<div class="item-title"><%= title %></div>
|
|
<div class="item-price">$<%= price %></div>
|
|
<div class="item-form"></div>
|
|
<form action="#/cart" method="post">
|
|
<p>
|
|
<label>Quantity:</label>
|
|
<input class="uqf" name="quantity" size="2" type="text" value="1" />
|
|
</p>
|
|
<p>
|
|
<input class="uq" type="submit" value="Add to Cart" />
|
|
</p>
|
|
</form>
|
|
<div class="item-link">
|
|
<a href="<%= url %>">Buy this item on Amazon</a>
|
|
</div>
|
|
<div class="back-link">
|
|
<a href="#">« Back to Items</a>
|
|
</div>
|
|
</script>
|
|
|
|
<script id="store_cart_template" type="text/x-underscore-template">
|
|
<p>Items: <%= count %> ($<%= cost %>)</p>
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
<div id="header">
|
|
<h1>
|
|
The Backbone Store
|
|
</h1>
|
|
<div class="cart-info"></div>
|
|
</div>
|
|
<div id="main"></div>
|
|
</div>
|
|
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
|
|
<script src="underscore.js" type="text/javascript"></script>
|
|
<script src="backbone.js" type="text/javascript"></script>
|
|
<script src="store.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|