83 lines
2.3 KiB
HTML
83 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>KO Shopping Cart</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
|
</head>
|
|
<body>
|
|
<h1>Catalog</h1>
|
|
|
|
<form class="form-horizontal" role="form" data-bind="with:newProduct">
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Name"
|
|
data-bind="textInput:name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
placeholder="Price"
|
|
data-bind="textInput:price"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
placeholder="Stock"
|
|
data-bind="textInput:stock"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<button
|
|
type="submit"
|
|
class="btn btn-default"
|
|
data-bind="{click:$parent.addProduct}"
|
|
>
|
|
<i class="glyphicon glyphicon-plus-sign"> </i> Add Product
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<strong>Items:</strong>
|
|
<span data-bind="text:catalog().length"></span>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Price</th>
|
|
<th>Stock</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach:catalog">
|
|
<tr>
|
|
<td data-bind="text:name"></td>
|
|
<td data-bind="text:price"></td>
|
|
<td data-bind="text:stock"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- vendor library -->
|
|
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
|
|
<script type="text/javascript" src="js/bootstrap.js"></script>
|
|
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
|
|
<!-- app -->
|
|
<script type="text/javascript" src="js/models/product.js"></script>
|
|
<script type="text/javascript" src="js/viewmodel.js"></script>
|
|
</body>
|
|
</html>
|